放大镜原生js

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#du{
width: 1200px;
height: 800px;
margin: 100px;
position: relative;

}

.small{
position: absolute;
width: 260px;
height: 140px;
left: 0px;
top: 0px;
}
.sz{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background: rgba(233,23,233,0.4);
display: none;

}
.small img{
width: 260px;
height: 140px;
}
.big{
margin-left: 20px;
position: absolute;
left: 260px;
top: 0px;
display: none;
}
.big .dz{
width: 400px;
height: 400px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.big img{
width: 1040px;
height:560px;

}
</style>
<script type="text/javascript">
window.onload = function(){

var oSmall = document.getElementsByClassName('small')[0];
var oBig = document.getElementsByClassName('big')[0];
var oSz = document.getElementsByClassName('sz')[0];
var oDz = document.getElementsByClassName('dz')[0];
var oImg = document.getElementsByTagName('img')[1];
var _left = 0;
var _top = 0;
oSmall.onmouseover = function(){
oBig.style.display='block';
oSz.style.display = 'block';

};
oSmall.onmousemove = function(evt){
var e = evt || event;
// alert(oSmall.offsetLeft)
_left = e.clientX - 100 - oSz.offsetWidth/2;
_top = e.clientY- 100 - oSz.offsetHeight/2;

if(_left<0){
_left=0;
}else if(_left>oSmall.offsetWidth-oSz.offsetWidth){
_left = oSmall.offsetWidth-oSz.offsetWidth;
}
if(_top<0){
_top=0;
}else if(_top>oSmall.offsetHeight-oSz.offsetHeight){
_top = oSmall.offsetHeight-oSz.offsetHeight;
}
oSz.style.left = _left+'px';
oSz.style.top = _top+'px';

oImg.style.marginLeft= -4 * _left+'px';
oImg.style.marginTop = -4 * _top+'px';
};
oSmall.onmouseout = function(){
oBig.style.display='none';
oSz.style.display = 'none';

};

};
</script>
</head>
<body>
<div id="du">
<div class="small">
<div class="sz"></div>
<img src="0.jpg">
</div>
<div class="big">
<div class="dz">
<img src="0.jpg">
</div>

</div>
</div>
</body>
</html>

巴特西

放大镜原生js

最新文章

热门文章