选项卡放大镜（淘宝购物效果）

<!DOCTYPE html>

<html>

<head>

</head>

margin: 0;

padding: 0;

}

#box{

width: 350px;

height: 350px;

border: 1px solid #000;

margin: 200px;

position: relative;

}

#big{

width: 400px;

height: 400px;

border: 1px solid #000;

overflow: hidden;

position: absolute;

top:0;

left : 360px;

display: none;

}

#mask{

width: 175.5px;

height: 175.5px;

position: absolute;

left:0;

top: 0;

background: url(images/1m.jpg);

/*opacity: 0.3;*/

display: none;

cursor: move;

}

#small{

width:350px;

height:50px;

}

#small img{

margin-right:20px;

}

#middle{

position: relative;

}

#bigImg{

position: absolute;

left: 0;

top: 0;

}

#center{

width: 350px;

height: 350px;

position: absolute;

left: 0;

top: 0;

background: #0000FF;

opacity: .3;

}

</style>

<body>

</div>

</div>

</div>

</body>

</html>

var box = $id("box");

var middle = $id("middle");

var big = $id("big");

var mask = $id("mask");

var bigImg = $id("bigImg");

//鼠标移入到middle区域操作mask和big的显示

middle.onmouseover = function(){

mask.style.display = "block";

big.style.display = "block";

}

//鼠标移入到middle区域操作mask和big的隐藏

middle.onmouseout = function(){

mask.style.display = "none";

big.style.display = "none";

}

var smallImg = $id("small").children;

for(var i = 0 ; i < smallImg.length;i++){

//smallImg[i].index = (i+1);

smallImg[i].index=i;

console.log(i)

smallImg[i].onclick = function(){

$id("m").src = "images/"+(this.index+1)+"m.jpg"

$id("bigImg").src = "images/"+(this.index+1)+"b.jpg" ;

}

//鼠标在小图区移动操作mask的移动

middle.onmousemove = function(e){

var e = e || event;

var x = e.pageX - box.offsetLeft - mask.offsetWidth/2;

var y = e.pageY - box.offsetTop - mask.offsetHeight/2;

//获取mask的最大的left和top值

var maxL = box.offsetWidth - mask.offsetWidth-2;

var maxT = box.offsetHeight - mask.offsetHeight-2;

//边界处理

x = x < 0 ? 0 : (x > maxL ? maxL : x);

y = y < 0 ? 0 : (y > maxT ? maxT : y);

mask.style.left = x + "px";

mask.style.top = y + "px";

mask.style.background = "url("+$id("m").src+")" ;

mask.style.backgroundPosition = -x + "px -" + y + "px";

var bigImgLeft = x*bigImg.offsetWidth/middle.offsetWidth;

var bigImgTop = y*bigImg.offsetHeight/middle.offsetHeight;

//设置大图的移动

bigImg.style.left = -bigImgLeft + "px";

bigImg.style.top = -bigImgTop + "px";

}

// 800/350 = 400 / 175

</script>

posted on 2019-01-28 09:34 伊人怎会持宠而骄阅读(192) 评论(0) 编辑收藏举报