用js实现电商网站详情页放大镜特效

1、效果截图

2、html代码

<div id="#demo">
<div id="small_box">
<div id="float_box"></div>
<img src="small.jpg" />
</div>
<div id="big_box">
<img src="big.jpg" />
</div>
</div>

3.css样式

*{margin: 0;padding: 0;}
#demo{display: block;width: 400px;height:366px;margin: 50px ;position: relative;border: 1px solid #ccc;}
#small_box{position: relative;z-index: 1;}
#float_box{display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #CCCCCC;filter: alpha(opacity = 50)/*透明度*/;opacity: .5;cursor: move;}
#big_box{display: none;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: #CCCCCC solid 1px;}
#big_box img{position: absolute;z-index: 1;}

4.js代码

<script type="text/javascript">
window.onload = function(){
var objDemo = document.getElementById("demo");
var objSmallBox = document.getElementById("small_box");
var objFloatBox = document.getElementById("float_box");
var objBigBox = document.getElementById("big_box");
var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

objSmallBox.onmouseover = function(){
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objSmallBox.onmouseout = function(){
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

objSmallBox.onmousemove = function(ev){
var _event = ev;
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth/2;
var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight/2;

if(left < 0){
left = 0;
}else if(left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth)){
left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
}
if(top < 0){
top = 0;
}else if(top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight)){
top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
}

objFloatBox.style.left = left +"px";
objFloatBox.style.top = top + "px";

var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);

objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
// console.log(objBigBoxImage.style.top);

}

}
</script>