本文使用的是400*300分辨率的图片,重要部分的思路都在代码注释里，如果还有不懂得地方，请留言，必回！代码如下:
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>CSS实现截图和放大镜</title>
-
<style>
-
*{
-
padding:0;
-
margin:0;
-
}
-
#view1{
-
width: 400px;
-
height: 300px;
-
position: absolute;
-
/*top:100px;
-
left:200px;*/
-
}
-
#view2{
-
width: 400px;
-
height: 300px;
-
position: absolute;
-
left:450px;
-
display: none;
-
}
-
#view2 img{
-
width: 100%;
-
}
-
#magnifier{
-
position: absolute;
-
width: 80px;
-
height: 60px;
-
border:1px solid red;
-
left: 160px;
-
top: 110px;
-
cursor: pointer;
-
display: none;
-
}
-
</style>
-
</head>
-
<body>
-
<p id="intend"></p>
-
<div id="view1">
-
<img src="images/2.jpg" alt="">
-
<div id="magnifier"></div>
-
</div>
-
-
<div id="view2">
-
<img src="images/2.jpg" alt="">
-
</div>
-
-
<script>
-
window.onload=function(){
-
var view=document.getElementById('view1');
-
var view_mag=document.getElementById('view2');
-
var inner=document.getElementById("intend");
-
var magnifier=document.getElementById("magnifier");
-
view.addEventListener('mouseover',function(){magnifier.style.display="block";},true);
-
view.addEventListener('mouseout',function(){magnifier.style.display="none";
-
view_mag.style.display="none";},true);//给view增加鼠标移出监听事件
-
view.onmousemove=function(){
-
var e=e||window.event;
-
var mouseX=e.clientX;//获得鼠标横坐标
-
var mouseY=e.clientY;//获得鼠标纵坐标
-
var magL=e.clientX-40;
-
var magT=e.clientY-30;
-
if(magL<0){magL=0}//不让之溢出
-
if(magL>320){magL=320}
-
if(magT<0){magT=0}
-
if(magT>240){magT=240}
-
magnifier.style.top=magT+"px";//鼠标滑动时放大镜的位置坐标
-
magnifier.style.left=magL+"px";
-
// inner.innerHTML=mouseX+" "+mouseY;
-
view_mag.style.display="block";
-
view_mag.style.clip="rect("+magT+"px"+","+(magL+80)+"px"+","+(magT+60)+"px"+","+magL+"px"+")";
-
//**clip:rect(top,width,height,left),clip为CSS截图属性,(top,left)为所截图的左上角坐标,(width-left,height-top)分别为所截图的宽和高**
-
-
//1:1放大镜
-
// view_mag.style.zoom=1;//正常比例
-
// view_mag.style.left=(450-magL)+"px";//放大后的图片在固定位置显示,magL为显示的区域的左上角横坐标
-
// view_mag.style.top=-magT+"px";//magT为显示区域的左上角纵坐标
-
-
// //1:2放大镜
-
// view_mag.style.zoom=2;
-
// view_mag.style.left=450/2-magL+"px";
-
// view_mag.style.top=-magT+"px";
-
-
// //1:3放大镜
-
// view_mag.style.zoom=3;
-
// view_mag.style.left=450/3-magL+"px";
-
// view_mag.style.top=-magT+"px";
-
-
// //1:4放大镜
-
// view_mag.style.zoom=4;
-
// view_mag.style.left=450/4-magL+"px";
-
// view_mag.style.top=-magT+"px";
-
-
//1:5放大镜
-
view_mag.style.zoom=5;
-
view_mag.style.left=450/5-magL+"px";
-
view_mag.style.top=-magT+"px";
-
}
-
}
-
</script>
-
</body>
-
</html>
阅读(1421) | 评论(0) | 转发(0) |
