每天给大家分享一点jQuery,同时也不断充实自己

jQuery资源宝库

介绍一个jQuery图片放大插件

有时候你可能需要实现这样的效果:当把鼠标移到图片上,图片会逐渐放大,鼠标移开后,图片恢复到原来大小。今天我给大家介绍一款鼠标滑过图片放大的插件ZoomImgRollover,它可以非常方便地实现上述功能,一起来看一下吧。

1、效果预览

把鼠标移上去,美女放大了看是不是更美了?

2、如何实现图片放大效果

看了上述效果,心动了吧,好吧,看在你踩我博客的份上,我就来教你如何把美女放大了来看。

  • 下载jquery 1.4 核心库    |    下载ZoomImgRollover插件

  • 在页面上引用脚本
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.itivy.com/DownloadFile.ashx?id=634441125869645412"></script>
  • 初始化插件html代码
    <p><a href="#" kesrc="#" style="border: 1px solid black;">
    <img id="testimg" style="width: 542px; height: 406px;" src="/Upload/EditorImage/20110619221736_5736.jpg" alt="" border="0">
    </a></p>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	$("#testimg").zoomImgRollover();
    });
    </script>

OK,就这样,很简单吧。

我也来参与讨论

你还可以输入600/600个字符 发表评论
称呼: (必填) 登录 | 开通博客
邮箱: (选填) 你的邮箱地址不会被公开
网站: (选填)
验证码: (必填)
看不清换一张 看不清楚换一张