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> 


    实现的效果如下: 

     


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

  • 相关阅读:
    使用NetworkX进行社交分析
    文本情感分析
    使用NLTK进行基础的NLP处理
    使用pandas对文本数据进行处理
    文本处理
    分类器可视化
    无监督学习
    监督学习2
    模型验证
    Netty学习摘记 —— 预置SSL / HTTP / WebSocket编解码器
  • 原文地址:https://www.cnblogs.com/zxtceq/p/5403483.html
Copyright © 2011-2022 走看看