码迷,mamicode.com
首页 > Web开发 > 详细

电商网站jQuery放大镜代码

时间:2015-05-25 14:24:52      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

分享一款电商网站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

电商网站jQuery放大镜代码

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4527659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!