jQuery之玩转放大镜效果
从安 2019-06-25 来源 : 阅读 232 评论 0

摘要:本篇文章主要讲述jQuery之玩转放大镜效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章主要讲述jQuery之玩转放大镜效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

jQuery之玩转放大镜效果

一、html,css部分

 

jQuery之玩转放大镜效果

jQuery之玩转放大镜效果


二、js部分

 

jQuery之玩转放大镜效果


三、源代码部分

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>

 

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @从安 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计