欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

6.放大镜效果

程序员文章站 2022-05-03 23:05:22
一、html,css部分 二、js部分 三、源代码部分 ......

一、html,css部分

6.放大镜效果

6.放大镜效果

二、js部分

6.放大镜效果

三、源代码部分

  1 <head>
  2     <meta charset="utf-8">
  3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4     <meta http-equiv="x-ua-compatible" content="ie=edge">
  5     <title>document</title>
  6     <style>
  7         * {
  8             margin: 0px;
  9             padding: 0px;
 10             list-style: none;
 11         }
 12 
 13         #left {
 14             display: inline-block;
 15             margin: 50px 0 0 50px;
 16             width: 300px;
 17             height: 230px;
 18             position: relative;
 19             top: 125px;
 20         }
 21 
 22         #right {
 23             display: inline-block;
 24             width: 500px;
 25             height: 400px;
 26             overflow: hidden;
 27             position: absolute;
 28             top: 175px;
 29             left: 450px;
 30             display: none;
 31         }
 32 
 33         #leftson {
 34             width: 180px;
 35             height: 140px;
 36             border: 1px solid #666;
 37             background-color: rgba(90, 90, 90, 0.45);
 38             position: absolute;
 39             display: none;
 40             position: absolute;
 41         }
 42 
 43         #big {
 44             position: absolute;
 45         }
 46     </style>
 47 </head>
 48 
 49 <body>
 50     <div id="left">
 51         <div id="leftson"></div>
 52         <img src="img/smallpic.jpg" alt="">
 53     </div>
 54     <div id="right">
 55         <img id="big" src="img/bigpic.jpg" alt="">
 56     </div>
 57     <script>
 58         //-----获取所需要的元素节点-----
 59         var leftobj = document.getelementbyid('left');
 60         var leftsonobj = document.getelementbyid('leftson');
 61         var rightobj = document.getelementbyid('right');
 62         var bigimg = document.getelementbyid('big');
 63         //-----显示事件-----
 64         leftobj.onmouseover = function () {
 65             leftsonobj.style.display = 'block';
 66             rightobj.style.display = 'block';
 67         }
 68         //-----隐藏事件-----
 69         leftobj.onmouseout = function () {
 70             leftsonobj.style.display = 'none';
 71             rightobj.style.display = 'none';
 72         }
 73         //-----移动事件-----
 74         document.onmousemove = function (e) {
 75             var oevent = e || event;
 76             //-----获取当前鼠标的 x,y 坐标,
 77             //-----并减去leftobj距窗口边距的距离,
 78             //-----并减去leftsonobj可视宽度,高度的一半,
 79             //----------------------------------------
 80             //-----目的,将鼠标定在leftsonobj(透明小块)的正中间--------
 81             var top = oevent.clienty - leftobj.offsettop - leftsonobj.offsetheight / 2;
 82             var left = oevent.clientx - leftobj.offsetleft - leftsonobj.offsetwidth / 2;
 83             //-----判断,并将leftsonobj(透明小块)固定在他的父盒子内部------
 84             if (top <= 0) {
 85                 top = 0
 86             } else if (top >= leftobj.offsetheight - leftsonobj.offsetheight) {
 87                 top = leftobj.offsetheight - leftsonobj.offsetheight
 88             }
 89             if (left <= 0) {
 90                 left = 0;
 91             } else if (left > leftobj.offsetwidth - leftsonobj.offsetwidth) {
 92                 left = leftobj.offsetwidth - leftsonobj.offsetwidth;
 93             }
 94             //-----获取leftsonobj(透明小块)与leftobj(他的父盒子)的长宽差值------
 95             //-----并用left,top分别除以他们,获取比例(percentx)(percenty)------
 96             var percentx = left / (leftobj.offsetwidth - leftsonobj.offsetwidth);
 97             var percenty = top / (leftobj.offsetheight - leftsonobj.offsetheight);
 98             //-----赋值部分-----
 99             leftsonobj.style.top = top + 'px';
100             leftsonobj.style.left = left + 'px';
101             //-----获取bigimg(大图片)与rightobj(他的父盒子)的差值------
102             //-----并将他们乘以比例值(percentx)(percenty)------
103             bigimg.style.top = - percenty * (bigimg.offsetheight - rightobj.offsetheight) + 'px';
104             bigimg.style.left = - percentx * (bigimg.offsetwidth - rightobj.offsetwidth) + 'px';
105         }
106     </script>
107 </body>