当前位置:  首页  >  PHP教程  >  PHP 基础  >  开发经验

jQuery+elevateZoom演示多种放大镜效果

提供各种官方和用户发布的代码示例,代码参考,欢迎大家交流学习
elevateZoom 是一个定制性非常高的 jQuery 放大镜插件,可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置,并且支持内缩放,使用放大镜镜头展示大图。

首先我们看下6种不同放大镜HTML结果:

默认效果



内置镜头



镜头聚焦



淡入/淡出设置



动画



鼠标滚动


6中不同的放大镜效果代码都很简单,代码都已翻译注释:$('#zoom_01').elevateZoom({});//默认效果

$('#zoom_02').elevateZoom({ //内置镜头
zoomType: "inner",//类型:内置镜头
cursor: "crosshair", //光标:十字
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 750 //镜头窗口淡出速度
});

$("#zoom_03").elevateZoom({ //镜头聚焦
zoomType: "lens",//类型:透镜效果
lensShape: "round", //透镜形状:圆形
lensSize: 200 //透镜尺寸:长和宽:200px
});

$("#zoom_04").elevateZoom({ //淡入/淡出设置
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 500,//镜头窗口淡出速度
lensFadeIn: 500,//透镜淡入速度
lensFadeOut: 500//透镜淡出速度
});

$("#zoom_05").elevateZoom({ //动画
easing: true //是否开启动画效果
});

$("#zoom_06").elevateZoom({ //鼠标滚动
scrollZoom: true //是否开启鼠标滚动
});
放大镜演示:http://www.sucaihuo.com/js/127.html

AD:真正免费,域名+虚机+企业邮箱=0元

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有