你的位置:首页 > 软件开发 > Java > 电商网站jQuery放大镜代码

电商网站jQuery放大镜代码

发布时间:2015-05-26 00:00:19
分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:在线预览 源码下载实现的代码。html代码: <cente ...

电商网站jQuery放大镜代码

分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:

电商网站jQuery放大镜代码

在线预览    源码下载

实现的代码。

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 (#换成@)。

可能感兴趣文章

我的浏览记录