您的位置：首页 > 其它

放大镜

2016-06-30 08:31 246 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜test</title>
</head>
<body>
<style>
*{margin:0;padding: 0;}
#demo{width:350px;height: 350px;position: relative;left:100px;top:100px;}
#smallpic{width:350px;height: 350px;cursor:move;}
#mask{width:150px;height: 150px;background: #fff;opacity: 0.5;filter:alpha(opacity=50);
position: absolute;left:0;top:0;display: none;}
#bigmask{width:350px;height: 350px;background: #000;position: absolute;left:0;top:0;
opacity: 0;filter:alpha(opacity=0);}
#bigpic{position: relative;top:-350px;left:350px;width:300px;height: 300px;overflow: hidden;display: none;}
#bigpic img{position: absolute;}
</style>

<script type="text/javascript">
/*
clientX 鼠标指针绝对坐标;
layerX 鼠标相对与事件对象的相对坐标;
cursor:move;移动鼠标;
offsetLeft offsetTop 只读的;
style.left style.right 要读取必须设定对应元素的style=“left:0;top:0”,
style css文件中设定不行;
*/
window.onload=function(){
var _div=document.getElementById('bigmask');
var _mask=document.getElementById('mask');
var _bigpic=document.getElementById('bigpic');
var  _bigimg=_bigpic.getElementsByTagName('img')[0];
_div.onmousemove=function(e){
var _mousex=e.layerX;
var _mousey=e.layerY;
_mask.style.left=(_mousex-_mask.offsetWidth/2)+'px';
_mask.style.top=(_mousey-_mask.offsetHeight/2)+'px';
if(_mask.offsetLeft<=0){
_mask.style.left=0;
}
if(_mask.offsetTop<=0){
_mask.style.top=0
}
var _maxleft=this.offsetWidth-_mask.offsetWidth;
if(_mask.offsetLeft>_maxleft){
_mask.style.left=_maxleft+'px';
}
var _maxtop=this.offsetHeight-_mask.offsetHeight;
if(_mask.offsetTop>_maxtop){
_mask.style.top=_maxtop+'px';//top t小写;
}
_bigimg.style.left=-(parseInt(_mask.style.left)*2)+'px';
_bigimg.style.top=-(parseInt(_mask.style.top)*2)+'px';
}
_div.onmouseover=function(){
_mask.style.display='block';
_bigpic.style.display='block';
}
_div.onmouseout=function(){
_mask.style.display='none';
_bigpic.style.display='none';
}

}
</script>
<div id="demo" style="background:#000;">
<div id="smallpic">
<img src="images/p2.jpg" width="350" height="350" alt="">
<div id="mask"></div>
<div id="bigmask"></div>
</div>
<div id="bigpic">
<img src="images/p2.jpg" width="700" height="700" alt="">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航