当前位置:网站首页>Imitation Jingdong magnifying glass effect (pink teacher version)
Imitation Jingdong magnifying glass effect (pink teacher version)
2022-07-02 19:04:00 【Zhou million】
First, define it briefly HTML and CSS, That's not the point , The focus is on learning javascript
<style>
div {
box-sizing: border-box;
}
.content {
width: 1000px;
height: 600px;
margin: 0 auto;
margin-top: 100px;
}
.left {
position: relative;
float: left;
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.left img {
width: 100%;
}
.right {
overflow: hidden;
position: relative;
display: none;
float: left;
width: 600px;
height: 736px;
border: 1px solid #ccc;
}
.right img {
position: absolute;
top: 40px;
left: 50px;
height: 636px;
}
span {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgb(193, 193, 33);
opacity: .5;
display: none;
}
</style>
<script src=" Zoom in 2.js"></script>
</head>
<body>
<div class="content">
<div class="left">
<img src="phonemin.jpg" alt="">
<span id="span"></span>
</div>
<div class="right">
<img src="phonebig.png" alt="" class="rightImg">
</div>
</div>
</body>
That's how it works
Two 、js part
Steps and points for attention
1. use load Let all the code load , Re execution JS Code , You don't have to JS The code is written later
2、 When the mouse moves in and out left Box time ,span and right Show and hide ( That is to say, use left The reason for being the target )
3、 When the mouse is on left When moving in the box , Get him in left The coordinates of
e.pageX - left.offsetLeft: Mouse position in page - left The distance of the leftmost box in the page ( Because here left The parent element of the box is not located, so its offsetLeft Size is the distance between pages )
4、 Assign the above value to span Mask the box top and left ( because span It is made by positioning , So don't give extra )—— Mouse in left The position in the box is the same as span The upper left corner of the mask coincides
5、 The above is a little ugly , So let the position of the mouse in the box - span Half the size of the mask box , So the mouse is left Position in , Namely span In the middle .
Be careful : At this time, the position coordinate is still the position of the mouse in the box . Although his position has changed , But the size is subtracted from the above (e.pageX - left.offsetLeft - span.offsetWidth / 2 = Mouse position in box )
6、 use if else Statement limit span The location of the box , Don't let his mobile position exceed left The box
Be careful : If you simply consider If left<=0, Give Way left = 0; But at this time, his up and down can still go beyond the boundary !!
If you add : If left<=0 & top<=0 -->left = 0;top = 0; This will make left Will not cross the border ,top Will not cross the border , The remaining principles are similar
7、 The big box on the right follows the small box in the corresponding proportion
The distance the big box should go / The maximum distance a big box can travel = span The distance the box should go / span The maximum distance the box can go
---> The distance the big box should go = The maximum distance a big box can travel * span The distance the box should go / span The maximum distance the box can go
8、 Direct to right The image assignment in the box does not work , To give right The picture in the box is absolutely positioned
9、 to right When assigning values to pictures in the box , to shouldX and shouldY negative , It works better
10、 When the mouse is on left At the top left corner of the box , to right The position of the picture transmission in the box by top:0;left:0; In this way right The picture in the box is close to right The upper left corner of the box , such span When the box moves to the right again ,right The picture in the box will exceed .
Let the mouse in left At the top left corner , Give Way right The picture in the box is near the lower right corner , When moving in proportion , The image will not exceed right The box
window.addEventListener('load', function() {
var left = this.document.querySelector('.left');
var right = this.document.querySelector('.right');
var span = this.document.querySelector('span');
//1、 When the mouse moves in left Box time ,span and right Show
left.addEventListener('mouseover', function() {
span.style.display = 'inline-block';
right.style.display = 'block';
});
left.addEventListener('mouseout', function() {
span.style.display = 'none';
right.style.display = 'none';
});
// 2、 Give Way span The box can move with the mouse left Move while moving in
// (1) When the mouse moves, get the mouse in left Position in the box
left.addEventListener('mousemove', function(e) {
var x = e.pageX - left.offsetLeft;
var y = e.pageY - left.offsetTop;
// (2) hold x,y Assign a value to span The location of
// span.style.left = x + 'px';
// span.style.top = y + 'px';
// (3) Problems arise , The mouse is always span The top left corner of the box moves , Move him to span The middle of the box
// Translated a distance to the lower right corner , In general, it is the distance of the mouse in the box
var hleft = x - span.offsetWidth / 2;
var htop = y - span.offsetHeight / 2;
// span.style.left = hleft + 'px';
// span.style.top = htop + 'px';
// (4) Not allow span Box out left The boundary of the
if (hleft <= 0 & htop <= 0) {
hleft = 0;
htop = 0
} else if (hleft <= 0 & htop >= 200) {
hleft = 0;
htop = 200;
} else if (hleft >= 200 & htop <= 0) {
hleft = 200;
htop = 0;
} else if (hleft >= 200 & htop >= 200) {
hleft = 200;
htop = 200;
} else if (hleft <= 0) {
hleft = 0;
} else if (hleft >= 200) {
hleft = 200;
} else if (htop <= 0) {
htop = 0
} else if (htop >= 200) {
htop = 200;
}
console.log(hleft, htop);
span.style.left = hleft + 'px';
span.style.top = htop + 'px';
// 3、 Let the big box follow span The box moves the corresponding proportional distance
// 3.1 Maximum moving distance of large box
var rightImg = document.querySelector('.rightImg');
var bigMaxX = right.offsetWidth - rightImg.offsetWidth;
var bigMaxY = right.offsetHeight - rightImg.offsetHeight;
// right The distance the box should move = span Distance traveled * right Maximum moving distance / span Maximum moving distance
var shouldX = hleft * bigMaxX / (left.offsetWidth - span.offsetWidth);
var shouldY = htop * bigMaxY / (left.offsetHeight - span.offsetHeight);
console.log('shouldX ' + shouldX);
console.log('shouldY ' + shouldY);
// When the mouse is on left At the top left corner of the box , to right The position of the picture transmission in the box by top:0;left:0; In this way right The picture in the box is close to right The upper left corner of the box , such span When the box moves to the right again ,right The picture in the box will exceed .
// Let the mouse in left At the top left corner , Give Way right The picture in the box is near the lower right corner , When moving in proportion , The image will not exceed right The box
rightImg.style.left = -shouldX + 85 + 'px';
rightImg.style.top = -shouldY + 100 + 'px';
})
})
边栏推荐
- 27: Chapter 3: develop Passport Service: 10: [registration / login] interface: after the registration / login is OK, save the user session information (uid, utoken) to redis and cookies; (one main poi
- 深度学习数学基础
- Masa framework - DDD design (1)
- Comprendre complètement le tutoriel de traitement de Point Cloud basé sur open3d!
- LightGroupButton* sender = static_cast<LightGroupButton*>(QObject::sender());
- 消除IBM P750小机上的黄色报警灯[通俗易懂]
- How to play when you travel to Bangkok for the first time? Please keep this money saving strategy
- Industrial software lecture - core technology analysis of 3D CAD design software - the second lecture of the Forum
- Progress progress bar
- Thoroughly understand the point cloud processing tutorial based on open3d!
猜你喜欢
Stm32g0 USB DFU upgrade verification error -2
[0701] [论文阅读] Alleviating Data Imbalance Issue with Perturbed Input During Inference
Singapore summer tourism strategy: play Singapore Sentosa Island in one day
医院在线问诊源码 医院视频问诊源码 医院小程序源码
性能测试如何创造业务价值
What is cloud primordial? This time, I can finally understand!
高频面试题
Leetcode(81)——搜索旋转排序数组 II
[fluent] dart data type (VaR data type | object data type)
How to copy and paste interlaced in Excel
随机推荐
如何清理废弃pv和其对应的文件夹
R language dplyr package Na_ The if function converts the control in the vector value into the missing value Na, and converts the specified content into the missing value Na according to the mapping r
论文导读 | 机器学习在数据库基数估计中的应用
R语言ggplot2可视化分面图(facet):gganimate包基于transition_time函数创建动态散点图动画(gif)
2022编译原理期末考试 回忆版
9D电影是怎样的?(+维度空间常识)
在纽约寻找童真——新泽西州乐高乐园探索中心的美好一天
Server PHP environment building tutorial, PHP server environment building graphic explanation
SAP S/4HANA OData Mock Service 介绍
Crypto usage in nodejs
医院在线问诊源码 医院视频问诊源码 医院小程序源码
工业软件讲堂-三维CAD设计软件的核心技术解析----讲坛第二次讲座
How to clean up discarded PVs and their corresponding folders
The student Tiktok publicized that his alma mater was roast about "reducing the seal of enrollment". Netizen: hahahahahahahaha
Leetcode (154) -- find the minimum value II in the rotation sort array
Introduction to sap s/4hana OData mock service
“栈”的典型应用—表达式求值(C语言实现)
MySQL advanced learning summary 8: overview of InnoDB data storage structure page, internal structure of page, row format
思维意识转变是施工企业数字化转型成败的关键
【JVM调优实战100例】03——JVM堆调优四例