电商网站jQuery放大镜代码

分享一款电商网站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放大镜代码

最新文章

热门文章