最新消息:文章中包含代码时,请遵守代码高亮规范!

js 基础 —实现放大镜的效果-【转载】

杂项 刘, 勇 214浏览 0评论
js 基础 —实现放大镜的效果
能利用原生的js是非常重要的,所以对于仿照电商的商品放大图做出了这个放大镜
的效果。在这个例子中,放大镜跟随着鼠标的移动而移动,大盒的图片移动方向与小盒子图片的移动方向是相反的,它们的放缩比例是相同的,具体的实现案例如下:
第一种方法:
  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.         <title>放大镜效果</title>
  5.         <meta charset=“utf-8”>
  6.         <style type=“text/css”>
  7.         body{position: relative;}
  8.         *{margin: 0;padding:0;}
  9.         #Box{
  10.             height:300px;
  11.             width:300px;
  12.             position: relative;
  13.             border:1px solid gray;
  14.         }
  15.         #bigBox{
  16.             height:300px;
  17.             width:300px;
  18.             position: absolute;
  19.             top:0;
  20.             left:310px;
  21.             overflow: hidden;
  22.             display:none;
  23.             border: 1px solid gray;
  24.         }
  25.         #Box img{
  26.             height:300px;
  27.             width:300px;
  28.             }
  29.         #lay{
  30.             background:#fff;
  31.             border:1px solid gray;
  32.             position: absolute;
  33.             top:0;
  34.             left: 0;
  35.             opacity:0.5;
  36.             display:none;
  37.             filter:alpha(opacity=50);
  38.         }
  39.         </style>
  40.         <script type=“text/javascript”>
  41.             window.onload = function(){
  42.                 var Box = document.getElementById(“Box”);
  43.                 var bigBox = document.getElementById(“bigBox”);
  44.                 var bigbox = getChildNodes(bigBox)[0];
  45.                 var lay = document.getElementById(“lay”);
  46.                 //鼠标移入时,将放大镜和bigBox显示出来
  47.                 Box.onmouseover = function(){
  48.                     lay.style.display = “block”;
  49.                     bigBox.style.display = “block”;
  50.                 }
  51.                 //鼠标移出时,将放大镜和bigBox隐藏起来
  52.                 Box.onmouseout = function(){
  53.                     lay.style.display = “none”;
  54.                     bigBox.style.display = “none”;
  55.                 }
  56.                 Box.onmousemove = function(e){
  57.                     e = e || event;//事件源的兼容问题
  58.                     var scale = 4;//图片的放缩比例
  59.                     //将鼠标放到放大镜的中间
  60.                     var x = e.clientX – lay.offsetWidth/2;
  61.                     var y = e.clientY – lay.offsetHeight/2;
  62.                     //将放大镜的宽高与盒子的宽高结合起来按比例放缩
  63.                     lay.style.width = parseInt(Box.offsetWidth / scale )+ “px”;
  64.                     lay.style.height = parseInt(Box.offsetHeight / scale)+ “px”;
  65.                     //设置大盒子的宽高
  66.                     bigbox.style.width = Box.offsetWidth * scale + “px”;
  67.                     bigbox.style.height = Box.offsetHeight * scale + “px”;
  68.                     if(x < 0){
  69.                         x = 0;//左边界的判断,当超出时将x置为0;
  70.                     }
  71.                     //右边界的判断,当超出时将x置为Box的宽度减去放大镜的宽度;
  72.                     if( x >= Box.offsetWidth – lay.offsetWidth){
  73.                         x = Box.offsetWidth – lay.offsetWidth;
  74.                     }
  75.                     //下边界的判断,当超出时将y置为Box的高度减去放大镜的高度;
  76.                     if( y >= Box.offsetHeight – lay.offsetHeight){
  77.                         y = Box.offsetHeight – lay.offsetHeight;
  78.                     }
  79.                     if(y < 0){
  80.                         y = 0;//上边界的判断,当超出时将y置为0;
  81.                     }
  82.                     lay.style.left = x + “px”;
  83.                     lay.style.top = y + “px”;
  84.                     //同比例放缩,大的盒子图片的放缩比例,当小盒子向右移动的时候,大盒子向左移动同等的比例的宽高,方向是相反的
  85.                      var left = lay.offsetLeft * scale;
  86.                      var top  = lay.offsetTop * scale ;
  87.                     bigbox.style.marginLeft =(left * (-1)) + “px”;
  88.                     bigbox.style.marginTop =(top * (-1))+ “px”;
  89.                 }
  90.             }
  91.             //获取孩子的节点
  92.             function getChildNodes(element){
  93.                 var arr = [];
  94.                 var eList = element.childNodes;
  95.                 for(var i = 0;i < eList.length;i++){
  96.                     if(eList[i].nodeType == 1){//过滤空白节点
  97.                         arr.push(eList[i]);
  98.                     }
  99.                  }
  100.                  return arr;
  101.             }
  102.         </script>
  103.     </head>
  104.     <body>
  105.         <div id=“Box”>
  106.             <img  src=“1.jpg”/>
  107.             <span id=“lay”></span>
  108.         </div>
  109.         <div id=“bigBox”>
  110.             <img  src=“1.jpg” />
  111.         </div>
  112.     </body>
  113.     </html>
第二种方法是:运用children属性获取孩子
  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.         <title>放大镜效果</title>
  5.         <meta charset=“utf-8”>
  6.         <style type=“text/css”>
  7.         body{position: relative;}
  8.         *{margin: 0;padding:0;}
  9.         #Box{
  10.             height:300px;
  11.             width:300px;
  12.             position: relative;
  13.             border:1px solid gray;
  14.         }
  15.         #bigBox{
  16.             height:300px;
  17.             width:300px;
  18.             position: absolute;
  19.             top:0;
  20.             left:310px;
  21.             overflow: hidden;
  22.             display:none;
  23.             border: 1px solid gray;
  24.         }
  25.         #Box img{
  26.             height:300px;
  27.             width:300px;
  28.             }
  29.         #lay{
  30.             background:#fff;
  31.             border:1px solid gray;
  32.             position: absolute;
  33.             top:0;
  34.             left: 0;
  35.             opacity:0.5;
  36.             display:none;
  37.             filter:alpha(opacity=50);
  38.         }
  39.         </style>
  40.         <script type=“text/javascript”>
  41.             window.onload = function(){
  42.                 var Box = document.getElementById(“Box”);
  43.                 var bigBox = document.getElementById(“bigBox”);
  44.                 var bigbox = bigBox.children[0];
  45.                 var lay = document.getElementById(“lay”);
  46.                 //鼠标移入时,将放大镜和bigBox显示出来
  47.                 Box.onmouseover = function(){
  48.                     lay.style.display = “block”;
  49.                     bigBox.style.display = “block”;
  50.                 }
  51.                 //鼠标移出时,将放大镜和bigBox隐藏起来
  52.                 Box.onmouseout = function(){
  53.                     lay.style.display = “none”;
  54.                     bigBox.style.display = “none”;
  55.                 }
  56.                 Box.onmousemove = function(e){
  57.                     e = e || event;//事件源的兼容问题
  58.                     var scale = 4;//图片的放缩比例
  59.                     //将鼠标放到放大镜的中间
  60.                     var x = e.clientX – lay.offsetWidth/2;
  61.                     var y = e.clientY – lay.offsetHeight/2;
  62.                     //将放大镜的宽高与盒子的宽高结合起来按比例放缩
  63.                     lay.style.width = parseInt(Box.offsetWidth / scale )+ “px”;
  64.                     lay.style.height = parseInt(Box.offsetHeight / scale)+ “px”;
  65.                     //设置大盒子的宽高
  66.                     bigbox.style.width = Box.offsetWidth * scale + “px”;
  67.                     bigbox.style.height = Box.offsetHeight * scale + “px”;
  68.                     if(x < 0){
  69.                         x = 0;//左边界的判断,当超出时将x置为0;
  70.                     }
  71.                     //右边界的判断,当超出时将x置为Box的宽度减去放大镜的宽度;
  72.                     if( x >= Box.offsetWidth – lay.offsetWidth){
  73.                         x = Box.offsetWidth – lay.offsetWidth;
  74.                     }
  75.                     //下边界的判断,当超出时将y置为Box的高度减去放大镜的高度;
  76.                     if( y >= Box.offsetHeight – lay.offsetHeight){
  77.                         y = Box.offsetHeight – lay.offsetHeight;
  78.                     }
  79.                     if(y < 0){
  80.                         y = 0;//上边界的判断,当超出时将y置为0;
  81.                     }
  82.                     lay.style.left = x + “px”;
  83.                     lay.style.top = y + “px”;
  84.                     //同比例放缩,大的盒子图片的放缩比例,当小盒子向右移动的时候,大盒子向左移动同等的比例的宽高,方向是相反的
  85.                      var left = lay.offsetLeft * scale;
  86.                      var top  = lay.offsetTop * scale ;
  87.                     bigbox.style.marginLeft =(left * (-1)) + “px”;
  88.                     bigbox.style.marginTop =(top * (-1))+ “px”;
  89.                 }
  90.             }
  91.         </script>
  92.     </head>
  93.     <body>
  94.         <div id=“Box”>
  95.             <img  src=“1.jpg”/>
  96.             <span id=“lay”></span>
  97.         </div>
  98.         <div id=“bigBox”>
  99.             <img  src=“1.jpg” />
  100.         </div>
  101.     </body>
  102.     </html>

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24123.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者hale的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!