浙江 杭州

jQuery轻量级简单实用的图片放大镜特效

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-03-23

人气1128

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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).

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:260.90KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1867.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery轻量级简单实用的图片放大镜特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

点击右侧分享按钮并且进行评论 +10G币(已有0 评论)