当前位置:网站首页>仿京东放大镜效果(pink老师版)
仿京东放大镜效果(pink老师版)
2022-07-02 17:41:00 【周百万.】
首先简单定义一下HTML和CSS,这都不是重点,重点是学习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="放大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>
就会有这样的效果
二、js部分
步骤及注意点
1.采用load让所有代码加载完毕后,再执行JS代码,就不用把JS代码写到后面了
2、 当鼠标移入移出left盒子时,span和right显示与隐藏(也就是前面用left作为目标对象的原因)
3、当鼠标在left盒子中移动时,获取他在left中的坐标
e.pageX - left.offsetLeft: 鼠标在页面中的位置 - left盒子最左侧在页面中的距离(因为此处left盒子父级元素没有定位所以他的offsetLeft大小就是页面的距离)
4、将上面的值赋值给span遮罩盒子的top和left (因为span就是用定位做的,所以不用额外给)——鼠标在left盒子中的位置与span遮罩的左上角重合
5、上述有些许的不好看,所以就让鼠标在盒子中的位置 - span遮罩盒子的一半大小,因此鼠标在left中的位置,就是span中间的位置。
注意:此时的位置坐标还是鼠标在盒子中的位置。尽管他的位置发生了变化,但是在上述中减去了大小(e.pageX - left.offsetLeft - span.offsetWidth / 2 = 鼠标在盒子中的位置)
6、用 if else 语句限制一下span盒子的位置,不让他的能移动的位置超出left盒子
注意:如果单纯的只考虑 如果 left<=0,让 left = 0; 但是此时他的上下还是可以超出边界的!!
如果在前面加上: 如果left<=0 & top<=0 -->left = 0;top = 0;这样就会既让left不会越界,top也不会越界,剩下的原理相似
7、右边的大盒子跟着小盒子按照相应的比例走
大盒子应走的距离 / 大盒子能最大走的距离 = span盒子应走的距离 / span盒子能走的最大距离
--->大盒子应走的距离 = 大盒子能最大走的距离 * span盒子应走的距离 / span盒子能走的最大距离
8、直接给right盒子中的图片赋值是不起作用的,要给right盒子中的图片绝对定位才行
9、给right盒子中图片赋值时,给shouldX 和 shouldY 负值,这样效果更好
10、 当鼠标在left盒子左上角时,给right盒子中的图片传递的位置 为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角,这样span盒子再向右移动时,right盒子中的图片就会超出。
让鼠标在left左上角时,让right盒子中的图片靠近右下角,这样再按比例来移动时,图像不会超出right盒子
window.addEventListener('load', function() {
var left = this.document.querySelector('.left');
var right = this.document.querySelector('.right');
var span = this.document.querySelector('span');
//1、 当鼠标移入left盒子时,span和right显示
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、让span盒子能随着鼠标在left中的移动而移动
// (1)当鼠标移动时获取鼠标在left盒子中的位置
left.addEventListener('mousemove', function(e) {
var x = e.pageX - left.offsetLeft;
var y = e.pageY - left.offsetTop;
// (2)把x,y赋值给span的位置
// span.style.left = x + 'px';
// span.style.top = y + 'px';
// (3)出现问题,鼠标总是在span盒子的左上角移动,要把他移动到span盒子的中间
// 往右下角平移了一段距离,总体还是鼠标在盒子中的距离
var hleft = x - span.offsetWidth / 2;
var htop = y - span.offsetHeight / 2;
// span.style.left = hleft + 'px';
// span.style.top = htop + 'px';
// (4)不让span盒子出left的边界
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、让大盒子跟着span盒子移动相应比例距离
// 3.1 大盒子最大移动距离
var rightImg = document.querySelector('.rightImg');
var bigMaxX = right.offsetWidth - rightImg.offsetWidth;
var bigMaxY = right.offsetHeight - rightImg.offsetHeight;
// right盒子应该移动的距离 = span移动的距离 * right最大移动距离 / span最大移动距离
var shouldX = hleft * bigMaxX / (left.offsetWidth - span.offsetWidth);
var shouldY = htop * bigMaxY / (left.offsetHeight - span.offsetHeight);
console.log('shouldX ' + shouldX);
console.log('shouldY ' + shouldY);
//当鼠标在left盒子左上角时,给right盒子中的图片传递的位置 为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角,这样span盒子再向右移动时,right盒子中的图片就会超出。
//让鼠标在left左上角时,让right盒子中的图片靠近右下角,这样再按比例来移动时,图像不会超出right盒子
rightImg.style.left = -shouldX + 85 + 'px';
rightImg.style.top = -shouldY + 100 + 'px';
})
})
边栏推荐
- SQL training 2
- The difference between promise and observable
- 问题包含哪些环节
- reduce--遍历元素计算 具体的计算公式需要传入 结合BigDecimal
- Troubleshooting: kubectl reports an error validationerror: unknown field \u00a0
- 在纽约寻找童真——新泽西州乐高乐园探索中心的美好一天
- Matlab中弧度转角度、角度转弧度
- Deep neural network Summary
- Mysql高级篇学习总结6:索引的概念及理解、B+树产生过程详解、MyISAM与InnoDB的对比
- The difference between SLC, MLC, TLC and QLC NAND SSD: which is better?
猜你喜欢
How to clean up discarded PVs and their corresponding folders
在纽约寻找童真——新泽西州乐高乐园探索中心的美好一天
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
如何清理废弃pv和其对应的文件夹
故障排查:kubectl报错ValidationError: unknown field \u00a0
Excel如何进行隔行复制粘贴
消息队列消息丢失和消息重复发送的处理策略
Distance measurement - Jaccard distance
Singapore summer tourism strategy: play Singapore Sentosa Island in one day
How to copy and paste interlaced in Excel
随机推荐
【JVM调优实战100例】02——虚拟机栈与本地方法栈调优五例
[100 cases of JVM tuning practice] 02 - five cases of virtual machine stack and local method stack tuning
Excel查找一列中的相同值,删除该行或替换为空值
The text editor hopes to mark the wrong sentences in red, and the text editor uses markdown
The student Tiktok publicized that his alma mater was roast about "reducing the seal of enrollment". Netizen: hahahahahahahaha
Websocket of Web real-time communication technology
Deep neural network Summary
2022编译原理期末考试 回忆版
R language uses lrtest function of epidisplay package to perform likelihood ratio test on multiple GLM models (logisti regression). Compare whether the performance of the two models is different, and
Leetcode (154) -- find the minimum value II in the rotation sort array
徹底搞懂基於Open3D的點雲處理教程!
学生抖音宣传母校被吐槽“招生减章”,网友:哈哈哈哈哈哈
[Yugong series] July 2022 go teaching course 001 introduction to go language premise
电商系统中常见的 9 大坑,你踩过没?
Leetcode (81) -- search rotation sort array II
[0701] [论文阅读] Alleviating Data Imbalance Issue with Perturbed Input During Inference
R language uses Cox of epidisplay package Display function obtains the summary statistical information of Cox regression model (risk rate HR, adjusted risk rate and its confidence interval, P value of
学习八股文的知识点~~1
IPtable port redirection masquerade[easy to understand]
MySQL advanced learning summary 8: overview of InnoDB data storage structure page, internal structure of page, row format