首页 > php教程 > php手册 > jQuery+elevateZoom演示多种放大镜效果

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

WBOY
发布: 2016-06-10 15:11:49
原创
1265 人浏览过

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件,可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置,并且支持内缩放,使用放大镜镜头展示大图。
jQuery+elevateZoom演示多种放大镜效果
首先我们看下6种不同放大镜HTML结果:<h1>默认效果</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1>内置镜头</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1>镜头聚焦</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1>淡入/淡出设置</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1>动画</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1>鼠标滚动</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" >6中不同的放大镜效果代码都很简单,代码都已翻译注释:$('#zoom_01').elevateZoom({});//默认效果 <br>  <br> $('#zoom_02').elevateZoom({ //内置镜头 <br>     zoomType: "inner",//类型:内置镜头 <br>     cursor: "crosshair", //光标:十字 <br>     zoomWindowFadeIn: 500,//镜头窗口淡入速度 <br>     zoomWindowFadeOut: 750 //镜头窗口淡出速度 <br> }); <br>  <br> $("#zoom_03").elevateZoom({ //镜头聚焦 <br>     zoomType: "lens",//类型:透镜效果 <br>     lensShape: "round", //透镜形状:圆形 <br>     lensSize: 200 //透镜尺寸:长和宽:200px <br> }); <br>  <br> $("#zoom_04").elevateZoom({ //淡入/淡出设置 <br>     zoomWindowFadeIn: 500,//镜头窗口淡入速度 <br>     zoomWindowFadeOut: 500,//镜头窗口淡出速度 <br>     lensFadeIn: 500,//透镜淡入速度 <br>     lensFadeOut: 500//透镜淡出速度 <br> }); <br>  <br> $("#zoom_05").elevateZoom({ //动画 <br>     easing: true //是否开启动画效果 <br> }); <br>  <br> $("#zoom_06").elevateZoom({ //鼠标滚动 <br>     scrollZoom: true //是否开启鼠标滚动 <br> });放大镜演示:http://www.sucaihuo.com/js/127.html

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板