zoukankan      html  css  js  c++  java
  • jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快。 

    实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了。 

    下面给出一个例子(在github下载的代码中有这个例子): 

    复制代码代码如下:

    <!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> 
    $('#zoom_01').elevateZoom(); 
    </script> 
    </body> 
    </html> 


    实现的效果如下: 

     


     
    具体代码没有研究,只是知道怎么使用了,特在此分享一下。

  • 相关阅读:
    UVA 1660 Cable TV Network
    UVA 1149 Bin Packing
    UVA 1610 Party Games
    UVA 12545 Bits Equalizer
    UVA 11491 Erasing and Winning
    UVA 1611 Crane
    DataTable循环删除行
    SqlBulkCopy使用心得 (大量数据导入)
    JQuery选择器大全
    java学习--GUI3
  • 原文地址:https://www.cnblogs.com/zxtceq/p/5403483.html
Copyright © 2011-2022 走看看