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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jquery插件实现轮播图效果
Oct 19 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
简单了解python模块概念
2018/01/11 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
还款承诺书范文
2014/05/20 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
武夷山导游词
2015/02/03 职场文书
前台接待岗位职责
2015/02/03 职场文书
食品药品安全责任书
2015/05/11 职场文书
用电申请报告范文
2015/05/18 职场文书
如何写观后感
2015/06/19 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书