Html+Css+Js图片放大可缓慢和移动（完整代码+详解）

最新推荐文章于 2023-07-27 16:47:48 发布

lucksoul

最新推荐文章于 2023-07-27 16:47:48 发布

阅读量2k

点赞数

分类专栏：案例详解步步进心 Html JavaScript Css 读卷有益文章标签：图片放大图片移动图片渐变

本文链接：https://blog.csdn.net/qq_38170526/article/details/98202370

版权

案例详解同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

步步进心

8 篇文章 0 订阅

订阅专栏

Html

8 篇文章 0 订阅

订阅专栏

一，问题描述

当鼠标移动到图片上时，对应的大图片悬浮在鼠标的附近位置，而且移入的时候，图片时缓慢加载的，直到大图片被完全加载完成。当鼠标已经移入图片上时，以偶定的同时大图片也跟着移动。

二，效果预览

在这里插入图片描述

三，用到的主要事件

onmouseover：鼠标略过事件
onmouseout：鼠标移出事件
onmousemove：鼠标移动事件
window.onload：页面加载事件

四，遇到的问题

大图片不断的闪动
原因：鼠标和大图片区域没有间距，遮挡了小图片的区域，使得触发了onmouseout事件，然后大图片消失，消失后小图片区域没有了遮挡，又触发了onmouseover事件，然后大图片区域出校，由于鼠标和大图片区域没有间距，这样不断地循环，就出现了大图片不断闪动的现象。
解决办法：定位大图片区域的时候，给他的右边和上边，设置5-10px的距离即可，具体值可以自定义。

五，完整代码

代码结构
Html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/big.css"/>
	<script src="../js/big.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="nav">
			<div id="top" w="410" h="340">
				<img src="../images/apple_1.jpg"/>
				
			</div>
			<!--<div id="big">
				<img src="../images/apple_1_bigger.jpg"/>
				<p>VIVO众享品质</p>
			</div>-->
		</div>
	</body>
</html>

Css代码

*{
	padding: 0px;
	margin: 0px;
}
#nav{
	width: 600px;
	height: auto;
	/*margin: 0 auto;*/
	/*border:1px solid blue ;*/
	position: relative;
}
#top{
	position: absolute;
	width: 100px;
	height: 76px;
	top: 200px;
	left:300px;
	border:1px solid red ;
	}
#top>img{
	width: 100%;
	height: 100%;
}
#big{
	width: 0px;
	height: 0px;
	margin: 0 auto;
	border: 4px solid black;
	background-color: gray;
	text-align: center;
	position: absolute;
	overflow: hidden;
}
#big img{
	padding-top: 5px;
	
}
#big p{
	font-size: 26px;
	color: orange;
}
#cover{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

Js代码

window.onload=function(){
	nav=document.getElementById("nav");
	Top=document.getElementById("top");
//	console.log(Top);
	//取得变量名千万别和关键字和属性值相同，要不然系统会识别成系统的字符，无法进行相应的操作
//	big=document.getElementById("big");
//	console.log(big);
//	bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
//	bigH=big.style.height?big.style.height:document.defaultView.getComputedStyle(big,null).height;
//	console.log("bigW="+bigW);
//console.log("bigH="+bigH);
	bigW=Top.getAttribute("w");
//	console.log("bigW="+bigW);
	bigH=Top.getAttribute("h");
	timer=null;
	W=0;
	H=0;
	Big();
}

function Big(){
	
	Top.onmouseover=function(){
		
		var evt=event?event:window.event;
		var pointL=evt.pageX+5;
		var pointT=evt.pageY+5;
		var div=document.createElement("div");
		div.id="big";
		
		var img=document.createElement("img");
		img.src="../images/apple_1_bigger.jpg";
		var p=document.createElement("p");
		p.innerHTML="VIVO众享品质";
		
		div.appendChild(img);
		div.appendChild(p);
		nav.appendChild(div);
		div.style.left=pointL+"px";
		div.style.top=pointT+"px";
		if(timer==null){
			timer=window.setInterval(change,20);
		}
		
	}
	Top.onmouseout=function(){
		var div=document.getElementById("big");
		if(div!=null){
			div.remove();
		}
		
		
	}
	Top.onmousemove=function(){
		var evt=event?event:window.event;
		var pointL=evt.pageX+5;
		var pointT=evt.pageY+5;
		var div=document.getElementById("big");
		if(div!=null){
			div.style.left=pointL+"px";
			div.style.top=pointT+"px";
		}
		
	}
}

function change(){
	W=W+15;
	H=H+10;
	if(W>bigW){
		W=bigW;
	}
	if(H>bigH){
		H=bigH;
	}
	var div=document.getElementById("big");
	if(div!=null){
		div.style.width=W+"px";
		div.style.height=H+"px";
	}
	
	if(W==bigW&&H==bigH){
		if(timer!=null){
			window.clearInterval(timer);
			timer=null;
			W=0;
			H=0;
		}
		
	}
}

六，效果演示

在这里插入图片描述

lucksoul

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Html+Css+Js图片放大可缓慢和移动（完整代码+详解）

一，问题描述当鼠标移动到图片上时，对应的大图片悬浮在鼠标的附近位置，而且移入的时候，图片时缓慢加载的，直到大图片被完全加载完成。当鼠标已经移入图片上时，以偶定的同时大图片也跟着移动。二，效果预览三，用到的主要事件onmouseover：鼠标略过事件onmouseout：鼠标移出事件onmousemove：鼠标移动事件window.onload：页面加载事件四，遇到的问...
复制链接

扫一扫