<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big{
width: 450px;
height: 450px;
position: absolute;
top:0;
left:360px;
border: 1px solid #ccc;
overflow: hidden;
display:none;
}
.mask{
width: 100px;
height: 100px;
background: rgba(255, 255,0, 0.4);
position: absolute;
top:0;
left: 0;
cursor: move; /*text输入图标 */
display:none;
}
.small{
position: relative;
overflow: hidden;
}
.big img{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="box" id="fdj">
<div class="small">
<img src="images/001.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="images/0001.jpg" alt="">
</div>
</div>
</body>
</html>
<script>
var fdj =document.getElementById("fdj");
var small =fdj.children[0];
var big=fdj.children[1];
var mask =small.children[1];
small.onmouseover = function(){
mask.style.display = "block";
big.style.display = "block";
}
small.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
//鼠标在small没移动
var x=0;
var y=0;
small.onmousemove =function(event){
var event = event ||window.event;
x =event.clientX - this.offsetParent.offsetLeft-mask.offsetWidth/2;
y =event.clientY - this.offsetParent.offsetTop-mask.offsetHeight/2;
if(x<0){x=0;}
else if(x>small.offsetWidth-mask.offsetWidth){
x=small.offsetWidth-mask.offsetWidth;}
if(y<0){y=0;}
else if(y>small.offsetHeight-mask.offsetHeight){
y=small.offsetHeight-mask.offsetHeight;}
mask.style.left = x+"px";
mask.style.top = y+"px";
var bigImage = big.children[0]; //大盒子里面的图片
bigImage.style.left= -x*big.offsetWidth/small.offsetWidth+"px";//计算出他们的倍数
bigImage.style.top = -y*big.offsetWidth/small.offsetWidth+"px";
}
</script>
js--放大镜
最新推荐文章于 2024-03-30 20:34:32 发布