• jquery.elevateZoom实现仿淘宝看图片,一张小的,一张大用于鼠标经过时候显示


    实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了。
     
    下面给出一个例子(在github下载的代码中有这个例子):
    插件下载地址:https://github.com/elevateweb/elevatezoom
     
    [html] 
    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset='utf-8'/>  
        <title>jQuery elevateZoom Demo</title>  
        <script src='jquery-1.8.3.min.js'></script>  
        <script src='jquery.elevateZoom-2.3.0.min.js'></script>  
    </head>  
    <body>  
    <h1>Basic Zoom Example</h1>  
    <img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>  
      
    <br />  
    see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>  
    <script>  www.2cto.com
        $('#zoom_01').elevateZoom();  
    </script>  
    </body>  
    </html>  
     
    实现的效果如下:





  • 相关阅读:
    100-days: twenty-four
    100-days: twenty-three
    100-days: twenty-two
    100-days: twenty-one
    100-days: twenty
    [NOI 2016]循环之美
    [NOI 2015]寿司晚宴
    [BZOJ 2655]calc
    [Codeforces 888G]Xor-MST
    [BZOJ 2839]集合计数
  • 原文地址:https://www.cnblogs.com/wang3680/p/607f681b10c0c9896e2fca03fa285a81.html
Copyright © 2020-2023  润新知