实现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 replace方法去空格
May 08 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
php读取文件内容的几种方法详解
2013/06/26 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript动态加载二
2012/08/22 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
联想C++笔试题
2012/06/13 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
五年级数学教学反思
2014/02/11 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年优秀党员材料
2014/12/18 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏