jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_Javascript教程-查字典教程网
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
发布时间:2017-01-14 来源:查字典编辑
摘要:这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的...

这个插件的名字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>

实现的效果如下:

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类