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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现抽奖功能
Oct 22 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+MYSQL实现用户的增删改查
2015/03/24 PHP
php阳历转农历优化版
2016/08/08 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python递归计算N!的方法
2015/05/05 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python如何定义有默认参数的函数
2020/08/10 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
通用求职信范文模板分享
2013/12/27 职场文书
绩效工资分配方案
2014/01/18 职场文书
放假通知
2015/04/14 职场文书
python基础之函数的定义和调用
2021/10/24 Python