临近Taobao

作者: 计算机网络  发布:2019-09-15

以此插件的名字elevatezoom,网站为

兑现那一个效能你必要养儿防老两张图片,一张小的,一张大用于鼠标经过时候显得。然后大家就算为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=";
<script>
$('#zoom_01').elevateZoom();
</script>
</body>
</html>

完结的效果如下:
图片 1 
具体代码未有色金属商量所究,只是了然怎么利用了,特在此分享一下。

您恐怕感兴趣的篇章:

  • JQuery获取鼠标步入和距离容器的主旋律
  • jquery达成的提示浮层跟随鼠标移动
  • Jquery完毕鼠标移动加大图片功用实例
  • jQuery完毕div跟随鼠标移动
  • jQuery完毕鼠标滑过图片移动特效
  • jQuery 乐乎相册鼠标移动显示隐蔽效果落到实处代码
  • Jquery创制层显示标题和内容且随鼠标移动而运动
  • JQuery完成鼠标移动图片体现描述层的方法
  • jQuery鼠标移动图片上达成放大成效
  • jQuery插件jFade实现鼠标经过的图片高亮另外变暗
  • jQuery完毕的响应鼠标移动方向插件用法示例【附源码下载】

本文由今晚开什么码发布于计算机网络,转载请注明出处:临近Taobao

关键词:

上一篇:当前页禁止复制粘贴截屏代码小集
下一篇:没有了