源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery图片缩放插件smartZoom使用实例详解

  • 时间:2021-03-18 08:41 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery图片缩放插件smartZoom使用实例详解
[url=https://github.com/e-smartdev/smartJQueryZoom]e-smart-zoom-jquery.js[/url]插件,下载地址及示例:[url=https://github.com/e-smartdev/smartJQueryZoom]https://github.com/e-smartdev/smartJQueryZoom[/url] 插件描述:通过将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果。 [b]smartZoom使用[/b] 举个栗子,上代码:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>joannau</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .imgCon {
      width: 800px;
      height: 500px;
      margin: 40px auto;
      border: 2px solid #000;
    }
    .imgDiv {
      width: 100%;
      height: 100%;
    }
    .imgCon img{
      width: 100%;
    }
  </style>
</head>
<body>
<div class="imgCon">
  <div class="imgDiv">
    <img src="./assets/zoomSmall.jpg" alt="">
  </div>
</div>
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.js"></script>
<script>
  $(function () {
    $(".imgCon img").smartZoom()
  })
</script>
</body>
</html>
直接对img对象使用smartZoom方法即可。 查看效果: [img]http://files.jb51.net/file_images/article/201708/201708250918303.jpg[/img] 缩放 [img]http://files.jb51.net/file_images/article/201708/201708250918304.jpg[/img] 完美,这就成功使用了。 但很多人会遇见使用smartZoom图片位置偏移的问题,效果如下: [img]http://files.jb51.net/file_images/article/201708/201708250918305.jpg[/img] 边框不见,再看代码会发现: [img]http://files.jb51.net/file_images/article/201708/201708250918306.jpg[/img] 原来是top和left作祟。此时解决问题的重点就是在img图像外,嵌套一个div容器。如下:
<div class="imgDiv">
    <img src="./assets/zoomSmall.jpg" alt="">
  </div>
此时,便能解决位置偏移问题。 其他API:
// 方法中可以通过设置top,left等参数来指定图片初始参数;
$(".imgCon img").smartZoom({
      'left': '50px'
    })
// 通过传入‘destroy‘来取消缩放;
 $(".imgCon img").smartZoom('destroy')
[b]总结[/b] 以上所述是小编给大家介绍的jQuery图片缩放插件smartZoom使用实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部