描述:当“鼠标放置在图片上时”或“者单击图片时”自动显示扩大的图片,使用其基本功能时不需要任何额外的javascript代码。
这篇教程指的是单击图片放大,再单击又回到原型的使用方法!
兼容浏览器:IE6-9/Firefox/Google Chrome
官方链接: http://www.sunsean.com/zoomi
JS下载: http://ijquery.360sites.cn/js/zoomi.js
预览: http://ijquery.360sites.cn/demo/zoomi4
打包下载: http://ijquery.360sites.cn/demo/zoomi/zoomi4.zip
参数说明:无
图片展示:
JS引用代码:
这里引入jquery和zoomi两个JS脚本,为方便重复使用,我这里引用绝对地址,你也可以使用的!
- <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="http://ijquery.360sites.cn/js/zoomi.js"></script>
- <script type="text/javascript">
- $(function(){
- $('#zoomme img').zoom1().click(function(){
- $(this).zoom2().fadeIn().click(function(){
- $(this).hide(); return false; })
- .end().parent().addClass('red'); return false; });
- });
- </script>
复制代码
HTML代码:
- <a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
- <a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
- <a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
- <a class="red" id="zoomme" href="#" title="Click me to toogle zoomi"><img src="images/sexy_002.jpg" alt="images/sexy.jpg"></a>
复制代码
[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=23