分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:
实现的代码。
html代码:
<center> <h1> Basic Zoom Example</h1> <img id="zoom_01" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Inner Zoom</h1> <img id="zoom_02" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Lens Zoom</h1> <img id="zoom_03" src=‘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/small/image1.png‘ data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Easing</h1> <img id="zoom_05" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" /> <br /> <br /> <br /> <h1> Mousewheel Zoom</h1> <img id="zoom_06" src=‘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>
via:http://www.w2bc.com/Article/39904
时间: 2024-10-13 11:43:44