购物网站放大镜效果js代码实现
放大镜的实现关键点在于考虑放大比例与阴影部分的关系,即:
//小图:大图 = 遮罩 :大图显示区
其中,小图部分指的是网页加载时看到的原比例图片,大图部分指的是通常被隐藏显示的img标签,遮罩部分即小图上提示放大的区域,大图显示区即相当于在大图上的相对位置,其比例与遮罩之于小图部分相同
具体代码如下:
html部分:
<body>
<div id="box">
<div id="shadow"></div>
<img src="../source/girlbig1.jpg" alt="" class="active">
<!-- <img src="../source/girlbig2.jpg" alt="">
<img src="../source/girlbig3.jpg" alt="">
<img src="../source/girlbig4.jpg" alt=""> -->
</div>
<ul id="nav">
<li><img src="../source/girlbig1.jpg" alt=""></li>
<li><img src="../source/girlbig2.jpg" alt=""></li>
<li><img src="../source/girlbig3.jpg" alt=""></li>
<li><img src="../source/girlbig4.jpg" alt=""></li>
</ul>
<div id="bigShadow">
<img src="" alt="">
</div>
</body>
css部分:
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
#box .active {
width: 400px;
height: 400px;
display: block;
}
#box img {
width: 400px;
height: 400px;
float: left;
display: none;
}
#shadow {
width: 150px;
height: 150px;
background: rgba(0, 0, 0, 0.5);
/* float: left; */
position: absolute;
top: 0;
left: 0;
display: none;
}
#nav {
width: 400px;
height: 100px;
list-style: none;
position: absolute;
top: 400px;
left: 0;
}
#nav li {
width: 100px;
height: 100px;
float: left;
}
#nav li img {
width: 100px;
height: 100px;
}
#bigShadow{
width: 300px;
height: 300px;
position: absolute;
top:20px;
left: 450px;
background-color: #f00;
overflow: hidden;
display: none;
}
#bigShadow img{
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 0;
}
</style>
js部分:
<script>// 400 800 150 300
//关键: 小图:大图 = 遮罩 :大图显示区
var active = document.querySelectorAll("active");
var box = document.querySelector("#box");
var nav = document.querySelector("#nav");
var img = document.querySelector("#box img");
// var img = document.querySelectorAll("#box img");
var shadow = document.querySelector("#shadow");
var bigShadow=document.querySelector("#bigShadow");
//遮罩部分宽度
var shadowWidth=getStyle(shadow,"width");
//大图显示部分宽度
var bigShadowWidth=getStyle(bigShadow,"width");
//放大比例
var scale=parseInt(parseInt(bigShadowWidth)/parseInt(shadowWidth));
console.log(nav.children);
var li = nav.children;
for (var i = 0; i < nav.children.length; i++) {
//移动切换
li[i].index = i;
li[i].onmouseenter = function (e) {
var ev = event || e;
var target = ev.target;
console.log(ev);
if (target.nodeName == "LI") {
// for(var i=0;i<img.length;i++){
// img[i].classList.remove("active");
// }
// img[this.index].classList.add("active");
img.src=this.children[0].src;
}
}
}
box.onmouseenter = function (e) {
var ev = event || e;
var x = ev.x;
var y = ev.y;
document.onmousemove = function (e) {
shadow.style.display="block";
bigShadow.style.display="block";
var ev = event || e;
var nx = ev.x;
var ny = ev.y;
var bigImg=bigShadow.children[0];
var left = 0, top = 0;
var bigShadowLeft=0,bigShadowTop=0;
//边界条件
//左右边框
if (nx <= parseInt(shadow.offsetWidth / 2)) {
left = 0;
}else if (nx > box.offsetWidth - parseInt(shadow.offsetWidth / 2)) {
left = box.offsetWidth - shadow.offsetWidth;
} else {
left = nx - parseInt(shadow.offsetWidth / 2);
}
//上边框
if (ny <= parseInt(shadow.offsetHeight / 2)) {
top = 0;
} else if (ny >= box.offsetHeight - parseInt(shadow.offsetHeight / 2)) {
top = box.offsetHeight - shadow.offsetHeight;
} else {
top = ny - parseInt(shadow.offsetHeight / 2);
}
shadow.style.left = `${left}px`;
shadow.style.top = `${top}px`;
bigImg.src=box.children[1].src;
bigShadowLeft=-left*scale;
bigShadowTop=-top*scale;
bigImg.style.left=`${bigShadowLeft}px`;
bigImg.style.top=`${bigShadowTop}px`;
}
box.onmouseleave = function () {
shadow.style.display="none";
bigShadow.style.display="none";
document.onmousemove = null;
}
}
function getStyle(ele,property){
if(getComputedStyle){
return getComputedStyle(ele)[property];
}else{
return ele.currentStyle[property];
}
}
</script>
实现功能:鼠标滑动可切换显示图片,鼠标移入显示图片会出现阴影块,同时右边出现放大的显示区.具体效果如下: