javascript 图片放大效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片悬浮放大效果</title>
<style>
img:hover{
cursor: pointer;
}
.smallImgDiv{
display: flex;
justify-content: space-between;
width: 800px;
height: 100px;
margin: 0px auto;
margin-top: 100px;
border: 4px solid deepskyblue;
padding: 8px;
}
.smallImg{
border: 1px solid gray;
}
.bigImgDiv{
position: absolute;
width: 400px;
height: 200px;
display: none;
border: 1px solid black;
}
.bigImg{
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script>
window.onload=function(){
var smallImg1=document.getElementsByClassName("smallImg")[0];
var smallImg2=document.getElementsByClassName("smallImg")[1];
var bigImgDiv=document.getElementsByClassName("bigImgDiv")[0];
var bigImgWidth=document.getElementsByClassName("bigImg")[0].width;//大图片的宽
function mouseMove(event){
var event=event||window.event;
var rightWidth = document.documentElement.offsetWidth - event.clientX; //当前右半边屏幕剩余宽度
//设置big的top值
var mouseTop= event.clientY + 20 + "px";//当前鼠标位置往下放20px
//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
var mouseLeft = (rightWidth < bigImgWidth + 10 ? event.clientX -bigImgWidth - 10 : event.clientX + 10) + "px";
bigImgDiv.style.display="block";
bigImgDiv.style.top=mouseTop;
bigImgDiv.style.left=mouseLeft;
}
function mouseOut(){
bigImgDiv.style.display="none";
}
smallImg1.addEventListener("mousemove",mouseMove);
smallImg1.addEventListener("mouseout",mouseOut);
smallImg2.addEventListener("mousemove",mouseMove);
smallImg2.addEventListener("mouseout",mouseOut);
}
</script>
</head>
<body>
<div class="smallImgDiv">
<img id="small" class="smallImg" src="https://www.baidu.com/img/bd_logo1.png" width="150px"/>
<img id="small" class="smallImg" src="https://www.baidu.com/img/bd_logo1.png" width="150px"/>
</div>
<div class="bigImgDiv">
<img class="bigImg" src="https://www.baidu.com/img/bd_logo1.png" width="400px"/>
</div>
</body>
</html>