要实现这样的效果,当鼠标在左边的区域滑动时,有一个小遮罩层跟着鼠标移动,且右边的区域显示左边区域的放大效果
用一张小图和一张大图做,这样不会失真
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
#small{
position: relative;
width: 257px;
height: 238px;
}
#drag{
width: 100px;
height: 100px;
background: #ccc;
opacity: 0.6;
filter:alpha(opacity = 60);
position: absolute;
left:0;
top:0;
display:none;
}
#big{
width: 257px;
height: 238px;
position: absolute;
left: 257px;
top: 0px;
overflow:hidden; /*不写这一句的话,大图就会溢出他的父元素的范围*/
display : none;
}
</style>
</head>
<body>
<div id="small">
<img src="img/nanshen1.png" alt="">
<div id="drag"></div>
</div>
<div id="big">
<img src="img/nanshen2.png" alt="">
</div>
<script>
var oSmall = document.getElementById("small");
var oDrag = document.getElementById("drag");
var oBig = document.getElementById("big");
oSmall.onmouseover = function(){
oDrag.style.display = "block";
oBig.style.display = "block";
}
oSmall.onmouseout = function(){
oDrag.style.display = "none";
oBig.style.display = "none";
}
oSmall.onmousemove = function(e){
oDrag.style.left = e.clientX- oDrag.offsetWidth/2 + "px";
oDrag.style.top = e.clientY -oDrag.offsetHeight/2 +"px";
}
</script>
</body>
</html>
现在的状况是,小遮罩层跟着鼠标跑,离开左边的小图区域了也不分开
那么怎么能让小遮罩层一直保持在small区域里面,不跟着鼠标走呢?
现在左边完成了,那么右边的大图怎么定位呢
要知道大图和小图的比例就行了,小图移动多少,大图移动他的倍数
但是现在又出问题了,在IE下,当小遮罩层离开或进入small的临界点时,小滑块跳动的厉害,难道是白边的原因?
应该不是白边的问题,那么怎么解决嘞
到此,放大镜就完成了,成功把帅气的欧巴变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
#small{
position: relative;
width: 257px;
height: 238px;
}
#drag{
width: 100px;
height: 100px;
background: #ccc;
opacity: 0.6;
filter:alpha(opacity = 60);
position: absolute;
left:0;
top:0;
display:none;
}
#big{
width: 257px;
height: 238px;
position: absolute;
left: 257px;
top: 0px;
overflow:hidden; /*不写这一句的话,大图就会溢出他的父元素的范围*/
display : none;
}
#big-img{
position:absolute;
}
</style>
</head>
<body>
<div id="small">
<img src="img/nanshen1.png" alt="">
<div id="drag"></div>
</div>
<div id="big">
<img id="big-img" src="img/nanshen2.png" alt="">
</div>
<script>
var oSmall = document.getElementById("small");
var oDrag = document.getElementById("drag");
var oBig = document.getElementById("big");
var oBigImg = document.getElementById("big-img");
oSmall.onmouseover = function(){
oDrag.style.display = "block";
oBig.style.display = "block";
oSmall.onmousemove(); //加上这句就不抖动了
}
oSmall.onmouseout = function(){
oDrag.style.display = "none";
oBig.style.display = "none";
}
oSmall.onmousemove = function(e){
e = e|| window.event
var iLeft = e.clientX- oDrag.offsetWidth/2;
var iTop = e.clientY -oDrag.offsetHeight/2;
var xMax = oSmall.offsetWidth - oDrag.offsetWidth;
var yMax = oSmall.offsetWidth -oDrag.offsetWidth;
if(iLeft<0){
iLeft = 0;
}
if(iTop<0){
iTop = 0;
}
if(iLeft>xMax){
iLeft = xMax;
}
if(iTop>yMax){
iTop = yMax;
}
oDrag.style.left = iLeft + "px";
oDrag.style.top = iTop +"px";
oBigImg.style.left = -iLeft*(oBigImg.offsetWidth/oSmall.offsetWidth) +"px";
oBigImg.style.top = -iTop*(oBigImg.offsetHeight/oSmall.offsetHeight) +"px";
}
</script>
</body>
</html>