Javascript 实现放大镜效果
今天做任务的时候，有一个任务就是让实现电商网站常用的放大镜效果，类似于这样的放大镜效果效果，之前并没有做过这种放大镜效果，刚开始的思路是对图片进行裁剪，但是后来发现实在是难以实现，于是求助了万能的谷歌，发现一个很好的思路就是，展示区是一小块可视区域，给他一个图片，超出可视区域的部分设为隐藏，有了这个思路，这个效果就能够很好的实现了，先看一下HTML结构！
rush:xhtml;">
<div id="picwrap">
<div id="floatBox">
<img src="1.jpg">
rush:js;">
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;
}
rush:js;">
<!DOCTYPE html>
<
Meta charset="utf-8">
Box">
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
