实现jquery放大镜的两种方法


Posted in jQuery onFebruary 22, 2018

jquery写的两种放大镜效果,没有使用到插件。调理和思路清晰。不是使用面向对象方式写的,初学者较容易看懂。废话不多说,看代码。图片这里就不上传了,大家自己找下。最好是找到比例的,这样效果比较好。

<body> 
  <div id="father"> 
    <div id="container"> 
      <img src="img/400_1.jpg" style="display: block;"> 
      <img src="img/400_2.jpg" > 
      <div class="shade"></div> 
    </div> 
    <div class="small first"><img src="img/50_1.jpg"></div> 
    <div class="small second"><img src="img/50_2.jpg"></div> 
  </div> 
   
  <div class="big"> 
    <img src="img/800_1.jpg" style="display: block;"> 
    <img src="img/800_2.jpg"> 
  </div> 
</body>

css代码

*{padding: 0; margin: 0;} 
  #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
  #father .second{left: 70px;} 
  .third{left: 140px;} 
  #father{position: relative; top: 100px; left: 50px; height: 460px;} 
  #container{position: absolute; width: 400px; height: 400px;} 
  #container img{position: absolute; display: none;} 
 
  .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0; 
    left: 0; display: none;} 
  .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;} 
  .big img{width: 800px; height: 800px; position: absolute; display: none;}

js代码

<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> 
  <script type="text/javascript"> 
    $(function () { 
 
      changePic('.first',0); 
      changePic('.second',1); 
 
      var shadeWidth = $('.shade').width(),//阴影的宽度 
        shadeHeight = $('.shade').height(),//阴影的高度 
        middleWidth = $('#container').width(),//容器的宽度 
        middleHeight = $('#container').height(),//容器的高度 
        bigWidth = $('.big').width(),//放大图片盒子的宽度 
        bigHeight = $('.big').height(),//放大图片盒子的高度 
        rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例 
        rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例 
 
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $('#container').hover(function() { 
        $('.shade').show(); 
        $('.big').show(); 
      }, function() { 
        $('.shade').hide(); 
        $('.big').hide(); 
      }).mousemove(function(e) {//当鼠标移动时,阴影和放大区图片进行移动 
 
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY; 
 
        //设置遮罩层的位置 
        $('.shade').offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });    
 
        //获取遮罩层相对父元素的位置 
        var cur = $('.shade').position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth; 
 
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer; 
 
        //判断完成后设置遮罩层的范围 
        $('.shade').css({ 
          top: _top, 
          left: _left 
        }); 
 
        //设置放大区图片移动 
        $('.big img').css({ 
          top: - rateY*_top, 
          left: - rateX*_left 
        }); 
 
      });; 
 
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
          $('.big img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
        }); 
      } 
       
    });

以上是常用的,下面这个是在原图基础上放大的

htm

<body> 
  <div id="father"> 
    <div id="container"> 
      <img src="img/400_1.jpg" style="display: block;"> 
      <img src="img/400_2.jpg" > 
      <img src="img/400_3.jpg" > 
      <div class="shade"> 
        <img src="img/800_1.jpg" style="display: block;"> 
        <img src="img/800_2.jpg"> 
        <img src="img/800_3.jpg"> 
      </div> 
    </div> 
    <div class="small first"><img src="img/50_1.jpg"></div> 
    <div class="small second"><img src="img/50_2.jpg"></div> 
    <div class="small third"><img src="img/50_3.jpg"></div> 
  </div> 
</body>

css代码

*{padding: 0; margin: 0;} 
    #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
    #father .second{left: 70px;} 
    .third{left: 140px;} 
    #father{position: relative; top: 100px; left: 50px; height: 460px;} 
    #container{position: absolute; width: 400px; height: 400px;} 
    #container img{position: absolute; display: none;} 
    .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} 
    .shade img{display: none; width: 800px; height: 800px; position: absolute;}

js代码

<span style="white-space:pre">  </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> 
  <script type="text/javascript"> 
    $(function () { 
 
      changePic('.first',0); 
      changePic('.second',1); 
      changePic('.third',2); 
 
      var shadeWidth = $('.shade').width(),//阴影的宽度 
        shadeHeight = $('.shade').height(),//阴影的高度 
        middleWidth = $('#container').width(),//容器的宽度 
        middleHeight = $('#container').height(),//容器的高度 
        bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度 
        bigImgHeight = $('.shade img').height(),//放大图片盒子的高度 
        rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2 
        rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2 
 
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $('#container').hover(function() { 
        $('.shade').show(); 
        $('.big').show(); 
      }, function() { 
        $('.shade').hide(); 
        $('.big').hide(); 
      }).mousemove(function(e) {//当鼠标移动时,阴影和放大区图片进行移动 
         
 
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY; 
 
        //设置遮罩层的位置 
        $('.shade').offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });    
 
        //获取遮罩层相对父元素的位置 
        var cur = $('.shade').position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth; 
 
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer; 
 
        //判断完成后设置遮罩层的范围 
        $('.shade').css({ 
          top: _top, 
          left: _left 
        }); 
 
         
        //设置放大区图片移动 
        $('.shade img').css({ 
          top: - _top*rateY*3/2, 
          left: - _left*rateX*3/2 
        }); 
 
      });; 
 
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
          $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
        }); 
      } 
       
    }); 
<span style="white-space:pre">  </span></script>
jQuery 相关文章推荐
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php mysql数据库操作类
2008/06/04 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
js css自定义分页效果
2017/02/24 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
JavaScript实现简单验证码
2020/08/24 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
python列表操作使用示例分享
2014/02/21 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python调用c++传递数组的实例
2019/02/13 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
delegate与普通函数的区别
2014/01/22 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
领导干部培训感言
2014/01/23 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL