jQuery实现的放大镜效果示例


Posted in Javascript onSeptember 13, 2016

本文实例讲述了jQuery实现的放大镜效果。分享给大家供大家参考,具体如下:

zoom.css:

*{
  padding: 0;
  margin: 0;
}
li{
  list-style-type: none;
}
.zoom{
  margin: 50px;
  position: relative;
}
.zoomMiddle{
  border: 1px solid #ccc;
  width: 300px;
  height: 300px;
  margin-bottom: 3px;
  position: relative;
}
.zoomMiddle img{
  width: 300px;
  height: 300px;
}
.mask{
  width: 100px;
  height: 100px;
  background: #abcdef;
  opacity:0.4;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.zoomSmall{
  -overflow: hidden;
  width: 302px;
  height: 54px;
}
.zoomSmall span{
  float: left;
  height: 52px;
  line-height: 52px;
  width: 10px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}
.zoomSmall span.disable{
  cursor: default;
  background: #ccc;
}
.wrapSmallImg{
  float: left;
  height: 54px;
  width: 232px;
  /*background: #f00;*/
  position: relative;
  overflow: hidden;
}
.wrapSmallImg ul{
  width: 348px;
  /*background: #f00;*/
  position: absolute;
  left: 0;
  top: 0;
}
.wrapSmallImg ul li{
  float: left;
  width: 50px;
  height: 50px;
  border: 2px solid #ccc;
  margin: 0 2px;
  _display: inline;
  cursor: pointer;
}
.wrapSmallImg ul li.current{
  border: 2px solid orange;
}
.wrapSmallImg ul li img{
  width: 50px;
  height: 50px;
}
.zoomLarge{
  width: 350px;
  height: 350px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 320px;
  overflow: hidden;
  display:none;
}
.zoomLarge img{
  width: 600px;
  height:600px;
  position: absolute;
  left: 0;
  top: 0;
}

zoom.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<input type="text" name="" id="">
<div class="zoom">
  <div class="zoomMiddle">
    <img src="1.jpg" alt="">
    <div class="mask"></div>
  </div>
  <div class="zoomSmall">
    <span class="left disable"><</span>
    <div class="wrapSmallImg">
      <ul>
        <li class="current"><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
      </ul>
    </div>
    <span class="right">></span>
  </div>
  <div class="zoomLarge"><img src="1.jpg" alt=""></div>
</div>
<script src="jquery.js"></script>
<script src="zoom.js"></script>
</body>
</html>

zoom.js:

$(function(){
  var smallImgLi = $('.wrapSmallImg ul li');
  var smallImgLiLength = smallImgLi.size();
  var smallImgLiWidth = smallImgLi.outerWidth(true);
  var smallImgUl = $('.wrapSmallImg ul');
  var leftBtn = $('span.left');
  var rightBtn = $('span.right');
  var now = 0;
  var zoomMiddleDiv = $('.zoomMiddle');
  smallImgLi.mouseover(function(){
    $(this).addClass('current').siblings().removeClass('current');
    var thisSrc = $(this).children('img').attr('src');
    $('.zoomMiddle img').attr('src',thisSrc);
    $('.zoomLarge img').attr('src',thisSrc);
  });
  rightBtn.click(function(){
    //当now=2的时候,我们不希望再让他滚动了
    leftBtn.removeClass('disable');
    if(now>=smallImgLiLength-4){
      $(this).addClass('disable');
      now = smallImgLiLength-4;
    }else{
      now++;
      smallImgUl.animate({'left':-now*smallImgLiWidth},300);
    }
  });
  leftBtn.click(function(){
    if(now==0){
      now=0;
    }else{
      now--;
      smallImgUl.animate({'left':'+='+smallImgLiWidth},300);
    }
  });
  zoomMiddleDiv.mousemove(function(e){
    $('.mask').show();
    $('.zoomLarge').show();
    zoomMiddleDivOffset = zoomMiddleDiv.offset();
    var x = e.pageX - zoomMiddleDivOffset.left - $('.mask').width()/2;
    var y = e.pageY - zoomMiddleDivOffset.top - $('.mask').height()/2;
    if(x<=0){
      x=0;
    }else if(x>=zoomMiddleDiv.width()-$('.mask').width()){
      x = zoomMiddleDiv.width()-$('.mask').width();
    }
    if(y<=0){
      y=0;
    }else if(y>=zoomMiddleDiv.height()-$('.mask').height()){
      y = zoomMiddleDiv.height()-$('.mask').height();
    }
    var percentageX = x/(zoomMiddleDiv.width()-$('.mask').width());
    var percentageY = y/(zoomMiddleDiv.height()-$('.mask').height());
    $('.zoomLarge img').css({
      left:-percentageX*(600-$('.zoomLarge').width()),
      top:-percentageY*(600-$('.zoomLarge').height())
    });
    $('input').val(percentageX+','+percentageY)
    $('.mask').css({
      'left':x+'px',
      'top':y+'px'
    });
  });
  zoomMiddleDiv.mouseout(function(){
    $('.mask').hide();
    $('.zoomLarge').hide();
  });
});

效果图如下:

jQuery实现的放大镜效果示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js兼容的placeholder属性详解
Aug 18 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
javascript的数组和常用函数详解
May 09 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 #Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 #Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 #Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
You might like
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
简单解析Django框架中的表单验证
2015/07/17 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
什么是URL
2015/12/13 面试题
写给学生的新学期寄语
2014/01/18 职场文书
《猫》教学反思
2014/02/26 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
学子宴致辞大全
2015/07/27 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python
python自动化测试通过日志3分钟定位bug
2021/11/20 Python