当前位置:网站首页>仿京东放大镜效果(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';
})
})
边栏推荐
- M2dgr: slam data set of multi-source and multi scene ground robot (ICRA 2022)
- Matlab中弧度转角度、角度转弧度
- 9D电影是怎样的?(+维度空间常识)
- Web实时通信技术之Websocket
- Three ways of function parameter transfer in C language
- promise 和 Observable 的区别
- AI开发调试系列第二弹:多机分布式调测探索之旅
- Kubernetes three open interfaces first sight
- After 22 years in office, the father of PowerShell will leave Microsoft: he was demoted by Microsoft for developing PowerShell
- 开源物联网平台ThingsBoard的安装
猜你喜欢
[100 cases of JVM tuning practice] 03 -- four cases of JVM heap tuning
消息队列消息丢失和消息重复发送的处理策略
Excel如何进行隔行复制粘贴
Stm32g0 USB DFU upgrade verification error -2
Looking for innocence in New York -- a beautiful day at the discovery center of Legoland, New Jersey
学生抖音宣传母校被吐槽“招生减章”,网友:哈哈哈哈哈哈
工业软件讲堂-三维CAD设计软件的核心技术解析----讲坛第二次讲座
Yesterday, Alibaba senior wrote a responsibility chain model, and there were countless bugs
电商系统中常见的 9 大坑,你踩过没?
Mysql高级篇学习总结7:Mysql数据结构-Hash索引、AVL树、B树、B+树的对比
随机推荐
Golang并发编程——goroutine、channel、sync
科技公司不同人对Bug的反应 | 每日趣闻
Have you stepped on the nine common pits in the e-commerce system?
材质UV遮罩的技巧
Singapore summer tourism strategy: play Singapore Sentosa Island in one day
Basic idea of quick sorting (easy to understand + examples) "suggestions collection"
How to clean up discarded PVs and their corresponding folders
问题包含哪些环节
LightGroupButton* sender = static_cast<LightGroupButton*>(QObject::sender());
R语言dplyr包na_if函数把向量数值中的控制转化为缺失值NA、按照映射规则把指定内容转化为缺失值NA
Web version 3D visualization tool, 97 things programmers should know, AI frontier paper | information daily # 2022.07.01
options should NOT have additional properties
LightGroupButton* sender = static_ cast<LightGroupButton*>(QObject::sender());
Web实时通信技术之Websocket
学习八股文的知识点~~1
SQL training 2
【愚公系列】2022年07月 Go教学课程 001-Go语言前提简介
谷歌官方回应:我们没有放弃TensorFlow,未来与JAX并肩发展
Use MNIST in tensorflow 2_ 784 data set for handwritten digit recognition
Google's official response: we have not given up tensorflow and will develop side by side with Jax in the future