一个计算机技术爱好者与学习者

0%

仿淘宝图片放大器

1. 原理

两个盒子,盒子1放小图片,盒子2放对应的大图片。盒子1里的图片正常显示,盒子2里的图片隐藏。在盒子1的图片标签中,加入大图的数据链接。当鼠标在盒子1上移动时,通过鼠标在盒子1的位置计算出盒子2中应该显示的大图的部分。

以下代码中,利用到了jquery.jqzoom.js插件。

2. 代码

1
2
3
4
5
<div id="preview" class="spec-preview"> 
<span class="jqzoom">
<img jqimg="images/b1.jpg" src="images/s1.jpg" />
</span>
</div>
1
2
3
$(function(){
$(".jqzoom").jqueryzoom({xzoom:380,yzoom:380});
});

3. 参考文档

jquery.jqzoom.js图片放大镜
http://www.cnblogs.com/sydeveloper/p/3796330.html

ImageZoom 图片放大效果
http://www.cnblogs.com/cloudgamer/archive/ImageZoom.html

jQuery-实现图片的放大镜显示效果

jquery插件 放大镜
http://www.jq-school.com/Article.aspx?kid=41

jQzoom简介
http://www.oschina.net/p/jqzoom?fromerr=tUayHgqO

  • 本文作者: 好好学习的郝
  • 原文链接: https://www.voidking.com/dev-jquery-image-zoom/
  • 版权声明: 本文采用 BY-NC-SA 许可协议,转载请注明出处!源站会即时更新知识点并修正错误,欢迎访问~
  • 微信公众号同步更新,欢迎关注~