zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件。这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大。鼠标进入和离开图片区域时都带有淡入淡出的效果。该图片放大镜插件的浏览器兼容性非常好,可以兼容IE7+的IE浏览器。
安装
你可以使用bower来安装该图片放大镜插件。
bower install zoomtoo
使用方法
使用该图片放大镜需要引入jQuery和jquery.zoomtoo.js文件。
<script src="jquery/2.1.4/jquery.min.js"></script> <script src="dist/jquery.zoomtoo.js"></script>
HTML结构
该图片放大镜的HTML结构将一个图片包裹在一个容器中即可。包裹容器用于定位。
<div id="#frame"> <img src="low_res.jpg" data-src="high_res.jpg" /> </div>
初始化插件
在页面加载完毕之后,可以通过下面的方法来初始化该放大镜插件。
$("#frame").zoomtoo({ magnify: 1 });
配置参数
下面是该放大镜插件的默认配置参数。
$("#demo").zoomToo({ // 持续时间,单位毫秒 showDuration: 500, moveDuration: 1200, // 初始化放大级别 magnify: 1, // 镜头的宽度和高度 lensWidth: 200, lensHeight: 200 });
浏览器兼容
- Firefox 2+ (Win, Mac, Linux);
- IE7+ (Win);
- Chrome 6+ (Win, Mac, Linux, Android, iPhone);
- Safari 3.2+ (Win, Mac, iPhone);
- Opera 8+ (Win, Mac, Linux, Android, iPhone).
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!