分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:在线预览 源码下载实现的代码。html代码: <cente ...
分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<center> <h1> Basic Zoom Example</h1> <img id="zoom_01" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Inner Zoom</h1> <img id="zoom_02" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Lens Zoom</h1> <img id="zoom_03" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Fade in / Fade Out Settings</h1> <img id="zoom_04" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Easing</h1> <img id="zoom_05" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Mousewheel Zoom</h1> <img id="zoom_06" src='/images/loading.gif' data-original='images/small/image1.png' data-zoom-image="images/large/image1.jpg" /> </center> <script> $('#zoom_01').elevateZoom({}); $('#zoom_02').elevateZoom({ zoomType: "inner", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 750 }); $("#zoom_03").elevateZoom({ zoomType: "lens", lensShape: "round", lensSize: 200 }); $("#zoom_04").elevateZoom({ zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500 }); $("#zoom_05").elevateZoom({ easing: true }); $("#zoom_06").elevateZoom({ scrollZoom: true }); </script>
原标题:电商网站jQuery放大镜代码
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。