• 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>  
     
    实现的效果如下:





  • 相关阅读:
    第二次站立会议4
    第二次站立会议3
    建议总结
    对搜狗输入法的个人评价
    第二期站立会议10
    典型用户和用户场景描述
    第二期站立会议9
    第二期站立会议8
    第二期站立会议7
    第二期站立会议6
  • 原文地址:https://www.cnblogs.com/wang3680/p/607f681b10c0c9896e2fca03fa285a81.html
Copyright © 2020-2023  润新知