介绍一个jQuery图片放大插件
有时候你可能需要实现这样的效果:当把鼠标移到图片上,图片会逐渐放大,鼠标移开后,图片恢复到原来大小。今天我给大家介绍一款鼠标滑过图片放大的插件ZoomImgRollover,它可以非常方便地实现上述功能,一起来看一下吧。
1、效果预览
把鼠标移上去,美女放大了看是不是更美了?
2、如何实现图片放大效果
看了上述效果,心动了吧,好吧,看在你踩我博客的份上,我就来教你如何把美女放大了来看。
- 在页面上引用脚本
<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,就这样,很简单吧。
Posted by
jQuery小子 @
2011-6-19 20:40:42
阅读(1447)
评论(0)
上一篇:jQuery快捷键热键插件hotkeys使用方法
下一篇:jquery放大镜插件AnythingZoomer
上一篇:jQuery快捷键热键插件hotkeys使用方法
下一篇:jquery放大镜插件AnythingZoomer
我也来参与讨论
你还可以输入600/600个字符
发表评论
