js做出來的放大镜的效果

来源：互联网发布：招聘淘宝客服编辑：程序博客网时间：2024/05/16 06:07

<!DOCTYPE html>
<html>
<head>
<title>放大镜的效果</title>
<meta charset="utf-8">
<style type="text/css">

*{
padding:0;
margin:0;
}
#class1{
width:200px;
height:300px;
overflow: hidden;
position: relative;
}
#mask{
width: 200px;
height: 300px;
position: absolute;
left: 0;top: 0;
opacity: 0;
filter: alpha(opacity=0);
background-color: red;
}
#mark{
display: none;
width:100px;
height:130px;
background-color: black;
opacity: 0.2;
filter: alpha(opacity=20);
position: absolute; top:0px; left:0px;
display: none;
}

#big_box{
width:400px;
height:600px;
overflow: hidden;
position: absolute; top:20px; left:220px;
display: none;
border:1px solid red;
}
#big{
position: absolute;
left:0px;
top:0px;
}
</style>
<script type="text/javascript">

window.onload=function (){

var mu=document.getElementById("class1");
var markdown=document.getElementById("mark");
var big_tu=document.getElementById("big");
var bi_box=document.getElementById("big_box");

mu.onmouseover=function(){
markdown.style.display="block";
bi_box.style.display="block";
}

mu.onmouseout=function(){
markdown.style.display="none";
bi_box.style.display="none";
}

mu.onmousemove=function(e){
var e=e||event;
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

var _h=y-markdown.offsetHeight/2;
var _l=x-markdown.offsetWidth/2;
if(_l<0){
_l=0;
}
else if(_l>mu.offsetWidth-markdown.offsetWidth){
_l=mu.offsetWidth-markdown.offsetWidth;
}
if(_h<0){
_h=0;
}
else if(_h>mu.offsetHeight-markdown.offsetHeight){
_h=mu.offsetHeight-markdown.offsetHeight;
}
markdown.style.left=_l+'px';
markdown.style.top=_h+'px';

//这里设置的是其中的那个大图其中的随着其中的可视区域的位置的改变做出的改变
var percentY=_h/(mu.offsetHeight-markdown.offsetHeight);
var percentX=_l/(mu.offsetWidth-markdown.offsetWidth);

big_tu.style.left=-percentX*(big_tu.offsetWidth-bi_box.offsetWidth)+'px';
big_tu.style.top=-percentY*(big_tu.offsetHeight-bi_box.offsetHeight)+'px';

}
}
</script>
</head>
<body>
<div id="class1">

<img src="F://图片/蓝天.jpg" width="200px" height="300px" id="yuan">

<span id="mark"></span>
<div id="mask"></div>
</div>
<div id="big_box">
<img src="F://图片/蓝天.jpg" id="big" width="800px" height="1200px">
</div>


</body>
</html>

阅读全文

0 0