作者:手机用户2702932521 | 来源:互联网 | 2022-01-25 18:51
Javascript 实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!
最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!
img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(1.jpg);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
background-color: white;
opacity: 1;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}
HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!
第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。
第二步,当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。
第三步,当鼠标完全移除后,需要加onmouseout事件。
第四步,onmouseover事件需要让放大镜和可视窗口显示出来。
第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。
第六步,onmouseout时间,让放大镜和可是窗口消失!
完整代码如下:
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!