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


Posted in jQuery onAugust 25, 2017

e-smart-zoom-jquery.js插件,下载地址及示例:https://github.com/e-smartdev/smartJQueryZoom

插件描述:通过将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果。

smartZoom使用

举个栗子,上代码:

<!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方法即可。

查看效果:

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

缩放

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

完美,这就成功使用了。

但很多人会遇见使用smartZoom图片位置偏移的问题,效果如下:

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

边框不见,再看代码会发现:

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

原来是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')

总结

以上所述是小编给大家介绍的jQuery图片缩放插件smartZoom使用实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
jQuery Position方法使用和兼容性
Aug 23 #jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
You might like
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python统计日志ip访问数的方法
2015/07/06 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python常见的pandas用法demo示例
2019/03/16 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
小学毕业演讲稿
2014/04/25 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年党务工作总结
2014/11/25 职场文书
初三英语教学计划
2015/01/23 职场文书
借钱欠条怎么写
2015/07/03 职场文书
数学备课组工作总结
2015/08/12 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
centos7安装mysql5.7经验记录
2022/05/02 Servers