网页广告移进移出的代码

最新推荐文章于 2024-10-10 22:10:24 发布

qq_175****220

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

文章标签：网页广告移进移出的代码

本文链接：https://blog.youkuaiyun.com/qq_29656961/article/details/63686145

本文介绍了一个简单的HTML页面中实现广告元素的移入移出动画效果。通过JavaScript控制div元素的位置变化，当鼠标悬停在广告区域时，广告内的元素从左侧滑入可见区域；当鼠标离开时，该元素再滑回不可见区域。这是一个基本的前端交互案例，展示了如何使用原生JavaScript配合HTML和CSS来完成动态效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告移进移出</title>
<style>
body,div,span{
margin:0;
padding:0;
}
#div1{
width:200px;
height:200px;
background:red;
position:relative;
left:-200px;
top:0;
}
#div1 span{
width:20px;
height:50px;
background:blue;
position:absolute;
left:200px;
top:75px;
}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	oDiv.onmouseover=function(){
		startMove(0);
	}
	oDiv.onmouseout=function(){
		startMove(-200);
	}
}
var timer=null;
function startMove(iTarget){
	clearInterval(timer);
	var oDiv=document.getElementById('div1');
	timer=setInterval(function(){
		var speed=0;
		if(oDiv.offsetLeft>iTarget){
			speed=-10;
		}else{
			speed=10;
		}
		if(oDiv.offsetLeft==iTarget){
			clearInterval(timer);
		}else{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	},30)
}
</script>
</head>

<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>