|
图片：
图片：22.png  代码： <!DOCTYPE html>
<html>
<title></title>
<head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#left{
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: absolute;
top: 50px;
left: 50px;
}
#right{
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: absolute;
top: 50px;
left: 500px;
overflow: hidden;
display: none;
}
#left span{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top:0;
background: blue;
opacity: 0.3;
display: none;
}
#right img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="left">
<img src="image/1.jpg" alt="">
<span></span>
</div>
<div id="right">
<img src="image/2.jpg" alt="">
</div>
</body>
<script>
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var oSpan=document.querySelector('#left span');
var oImg=document.querySelector('#right img');
//鼠标移入
oLeft.onmouseover=function () {
oSpan.style.display='block';
oRight.style.display='block';
};
//鼠标移出
oLeft.onmouseout=function () {
oSpan.style.display='none';
oRight.style.display='none';
};
//鼠标移动
oLeft.onmousemove=function (ev) {
//透明层跟着走
var l=ev.clientX-oSpan.offsetWidth/2-oLeft.offsetLeft;
var t=ev.clientY-oSpan.offsetHeight/2-oLeft.offsetTop;
if(l<=0){
l=0
}else if(l>=oLeft.offsetWidth-oSpan.offsetWidth){
l=oLeft.offsetWidth-oSpan.offsetWidth
}
if(t<=0){
t=0
}else if(t>=oLeft.offsetHeight-oSpan.offsetHeight){
t=oLeft.offsetHeight-oSpan.offsetHeight
}
oSpan.style.left=l+'px';
oSpan.style.top=t+'px';
/*让右边图片走*/
oImg.style.left=-oSpan.offsetLeft*(oImg.offsetWidth-oRight.offsetWidth)/(oLeft.offsetWidth-oSpan.offsetWidth)+'px';
oImg.style.top=-oSpan.offsetTop*(oImg.offsetHeight-oRight.offsetHeight)/(oLeft.offsetHeight-oSpan.offsetHeight)+'px';
};
</script>
</html>视频地址： https://www.bilibili.com/video/BV1xr4y1n7Hk |
|
最新喜欢： 阿里嘎多美羊...
|
公众号
