插件描述：jQuery Zoom是一款可以让我们将鼠标移动到图片上或者点击图片移动放大的插件。
jQuery Zoom是一款可以让我们将鼠标移动到图片上或者点击图片移动放大的插件。
使用步骤
1、首先将以下js和css文件引用到页面中
1 2 3 4 5 | <!-- CSS files --><link rel="stylesheet" type="text/css" href="zoom.css"><!-- Js Files --><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.zoom.js"></script> |
2、在head标签中加入以下js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> $(document).ready(function() { /* simple call */ $('#ex1').zoom(); $('#ex2').zoom({ on:'grab' }); $('#ex3').zoom({ on:'click' }); /* With callback function. EX. colorbox plugin ! */ $('a.photo').zoom({ url: 'photo-big.jpg', callback: function(){ $(this).colorbox({href: this.src}); } }); });</script> |
3、在body标签中加入以下格式的html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="zoom" id="ex1"> <img src="daisy.jpg" id="jack" width="555"height="320" alt="Daisy on the Ohoopee"><p> Hover</p></span> <span class="zoom" id="ex2"> <img src="roxy.jpg" width="290"height="320" alt="Roxy on the Ohoopee"><p> Grab</p></span> <span class="zoom" id="ex3"> <img src="daisy.jpg" width="555"height="320" alt="Daisy on the Ohoopee"><p> Click</p></span> |
参数配置
参数名 参数说明 可选值 默认值
url 大图的URL地址，如果不提供该参数，那么将使用第一额IMG元素的src 字符串 false
on 引发放大事件的鼠标动作 mouseover, grab, 或 click mouseover
icon 如果设为true，会在图片右上角添加一个提示 布尔值 true
duration 大图渐隐或渐显的速度 数字 120
callback 图片加载完成的回调函数 函数 false
参数解析
icon:true（默认值）右上角有一个小小的放大镜提示图片
icon:false
三种放大模式：mouseover, grab, 或 click
mouseover：就是当鼠标移动到图片上时放大
grab：是按下鼠标呈手型并放大图片
click：是点击鼠标后开始放大图片，再点击一次又恢复到不能放大的状态
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 漂亮的分页插件-JPAGINATE
- 下一个特效： 又一款幻灯片插件-FLEXSLIDER