javascript 图片放大效果

最新推荐文章于 2024-05-13 02:16:46 发布

友人C君~

最新推荐文章于 2024-05-13 02:16:46 发布

阅读量776

点赞数

分类专栏： js特效

本文链接：https://blog.csdn.net/CWH0908/article/details/89738394

版权

js特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

友人C君~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 图片放大效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片悬浮放大效果</title> <style> img:hover{ cursor: pointer; } .smallImgDiv{ di...
复制链接

扫一扫