首页 > 代码库 > js原生之淘宝放大镜特效
js原生之淘宝放大镜特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#maglifier{
width:1030px;
height:520px;
border:1px solid red;
box-sizing:border-box;
}
.sdiv{
position:absolute;
top:10px;
left:10px;
width:500px;
height:500px;
overflow: hidden;
}
.sdiv img{
position: absolute;
top:0;
left:0;
display: block;
width:100%;
}
.sdiv span{
position: absolute;
top:0;
left:0;
width:250px;
height:250px;
background-color: yellow;
opacity:0.5;
filter: alpha(opacity=50);
display:none;
cursor:crosshair;
}
.bDiv{
position: absolute;
top:10px;
left:520px;
width:500px;
height:500px;
overflow: hidden;
border:1px solid red;
}
.bDiv img{
position: absolute;
top:0;
left:0;
width:200%;
height:200%;
display: block;
}
</style>
<!-- 为了兼容IE8 -->
<!--[if IE 8]>
<script type="text/javascript">
if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName(‘*‘);
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(‘ ‘);
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}
</script>
<![endif]-->
</head>
<body>
<div id="maglifier">
<div class="sdiv">
<img src="http://www.mamicode.com/image/20170411123451.jpg" alt=‘小图片‘>
<span class="moveSpan"></span>
</div>
</div>
<script type="text/javascript">
var oMaglifier = document.getElementById("maglifier");
var oSDiv = document.getElementsByClassName("sdiv")[0];
var oMoveSpan = document.getElementsByClassName("moveSpan")[0];
// 创建放大的图片元素
var oBDiv = document.createElement("div"),
oBImg = document.createElement("img");
oBDiv.className = "bDiv";
oBImg.src = "http://www.mamicode.com/image/20170411123430.jpg";
oBImg.alt = "大图片";
oBImg.className = "bImg";
oSDiv.onmouseover = function (){
oBDiv.appendChild(oBImg);
oMoveSpan.style.display = "block";
oMaglifier.appendChild(oBDiv);
};
oSDiv.onmouseout = function (){
oMoveSpan.style.display = "none";
oMaglifier.removeChild(oBDiv);
};
oSDiv.onmousemove = function (e){
var e = e || window.event;
var oMoveSpan_MaxL = oSDiv.offsetWidth - oMoveSpan.offsetWidth; //获取移动框的水平临界值
var oMoveSpan_MaxH = oSDiv.offsetHeight - oMoveSpan.offsetHeight;//获取移动框的垂直临界值
var oBImg_MaxL = -(oBImg.offsetWidth - oBDiv.offsetWidth); //获取移动大图片的临界值
var oBImg_MaxH = -(oBImg.offsetHeight - oBDiv.offsetHeight);//获取移动大图片的临界值
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//因为ie是没有pageX的，而clientX又表示可视区域，当页面缩小时会有bug，这里重写pageX
//x,y分别表示新的pageX，pageY
var oMoveSpan_L = x - this.offsetLeft - oMoveSpan.offsetWidth/2;
var oMoveSpan_H = y - this.offsetTop - oMoveSpan.offsetHeight/2;
//移动框距离固定框1的left,top值
var oBImg_L = oMoveSpan_L/oMoveSpan_MaxL*oBImg_MaxL;
var oBImg_H = oMoveSpan_H/oMoveSpan_MaxH*oBImg_MaxH;
//大图片距离固定框2的left,top值
if(oMoveSpan_L < 0){oMoveSpan_L = 0;}
if(oMoveSpan_L > oMoveSpan_MaxL){oMoveSpan_L = oMoveSpan_MaxL;}
if(oMoveSpan_H < 0){oMoveSpan_H = 0;}
if(oMoveSpan_H > oMoveSpan_MaxH){oMoveSpan_H = oMoveSpan_MaxH;}
if(oBImg_L > 0){oBImg_L = 0;}
if(oBImg_L < oBImg_MaxL){oBImg_L = oBImg_MaxL;}
if(oBImg_H > 0){oBImg_H = 0;}
if(oBImg_H < oBImg_MaxH){oBImg_H = oBImg_MaxH;}
//到达临界值时，让它不再移动
oMoveSpan.style.left = oMoveSpan_L + "px";
oMoveSpan.style.top = oMoveSpan_H + "px";
oBImg.style.left = oBImg_L + "px";
oBImg.style.top = oBImg_H + "px";
};
</script>
</body>
</html>
js原生之淘宝放大镜特效