操作"/>
DOM操作
在box盒子中设置图片为背景,在盒子中设置一个move小盒子;给move盒子绑定移动事件,使其随着鼠标运动;设置一个盒子max与move盒子成比例放大作为放大后显示的窗口,在max盒子中添加一个图片,给图片设置成与box盒子背景图成比例放大的宽高;将图片在max盒子中超出部分隐藏;每次移动mova盒子时,修改max盒子中的img的top和left使其与move盒子移动成倍的距离
注意:
- 每个盒子成比例缩放,
- 每个盒子都要固定定位,不然top和left不能生效。
- 再放大显示时,窗口时动不了的,这时就只能移动图片,使其往move盒子移动的反方向运动。
<style>
.a{
display: flex;
justify-content: flex-start;
}
.box{
width: 200px;
height: 310px;
background-image: url(".jpg");
background-size: 100%;
position: relative;
}
.move{
width: 40px;
height: 40px;
background-color:rgb(89, 93, 93,0.5);
position: absolute;
display: none;
}
.show{
width: 120px;
height: 120px;
position:relative;
display: none;
overflow: hidden;
margin: 100px;
border: 1px solid black;
}
img{
width: 400px;
height: 620px;
position: absolute;
}
</style>
<div class="a">
<div class="box">
<div class="move"></div>
</div>
<div class="max">
<div class="show">
<img src=".jpg" alt="">
</div>
</div>
</div>
<script>
var box=document.querySelector(".box")
var move=document.querySelector(".move")
var show=document.querySelector(".show")
var img=document.querySelector("img")
box.addEventListener("mouseover",function(el){
move.style.display="block"
show.style.display="block"
})
box.addEventListener("mouseout",function(){
show.style.display="none"
move.style.display="none"
})
box.addEventListener("mousemove",function(el){
//在小图片上使move小盒子随鼠标移动
move.style.top=el.clientY-20+"px"
move.style.left=el.clientX-20+"px"
//窗口动不了,将图片移动
img.style.top=-(el.clientY-20)*2+"px"
img.style.left=-(el.clientX-20)*2+"px"
})
</script>
更多推荐
DOM操作
发布评论