jQuery图像缩放插件智能缩放使用示例

E-smart-zoom-jquery.js插件，下载地址和示例：https://github.com/e-smartdev/smartJQueryZoom

插件说明：将鼠标悬停在图片上，滚动鼠标滚轮，可以放大或缩小图片。

智能缩放的使用

举一个栗子，给它编码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title joannau/title style * { padd : 0；margin : 0；} .imgCon { width: 800px高度： 500 px；margin: 40px自动；border: 2px固体# 000；} .imgDiv { width : 100%；高度： 100%；} .img con img { width : 100%；}/style/head dydiv class=' IMgcon ' div class=' IMgdiv ' IMg src=' http :/assets/zoomsmall . jpg ' alt=' '/div/div script src=' http :/src/Jquery-1 . 11 . 0 . min . js '/script script src=' http :/src/e-smart-zoom-jquery . js '/script script $(function(){ $(')。img锥形)。smartZoom ()})/script/。

检查效果：

嗡嗡声

完美，这个用的成功。

但是很多人会遇到使用smartZoom图像位置偏移的问题，效果如下：

边框丢失，如果查看代码，您会发现：

原来是左上。此时，解决问题的关键是在img图像外嵌套一个div容器。如下所示：

div class=' img div ' img src=' http :/assets/zoomsall . jpg ' alt=' '/div这时候位置偏移问题就可以解决了。

其他API:

//在方法中，可以通过设置top、left等参数来指定图片的初始参数。$ ('.img锥形)。smart zoom({ ' left ' : ' 50px ' })//通过传入“destroy”取消缩放；$ ('.img锥形)。smartzoom(“销毁”)摘要

以上是边肖介绍的jQuery图像缩放插件smartZoom的使用示例的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！