用HTML5和JavaScript编写一个广告窗弹出缩回效果_javascipt实现点击弹出窗口移开后缩回-优快云博客

本文介绍如何使用HTML5和JavaScript来创建一个广告窗口，该窗口在鼠标悬停在特定元素（如'为你推荐'）上时会平滑地弹出，同时包含过渡效果。详细步骤和代码示例帮助读者掌握这一动态效果的实现方法。

说明：正常状态下如图
在这里插入图片描述
当鼠标放到“为你推荐”上时显示效果如图此过程有过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
*{padding: 0;margin: 0;}
		#ad{width: 200px;height: 250px;background-color: red;position: relative;
			top: 300px;left: -200px;}
		span{position: absolute;display: inline-block;width: 25px;height: 86px;background-color: #ccc;
			right: -25px;top: 82px;}
	</style>
	<script type="text/javascript">
		window.onload=function () {
		var o=document.getElementById('ad');
		var timer;
		//添加鼠标经过事件
		o.onmouseover=function(){
			clearInterval(timer);
			timer=setInterval(moveRight,10);
		};
		//鼠标离开事件
		o.onmouseout=function(){
			clearInterval(timer);
			timer=setInterval(moveLeft,10);
		};
		function moveRight(){
			var preLeft=o.offsetLeft;
			if (preLeft>=0) {
				clearInterval(timer);
			}else {
				o.style.left=o.offsetLeft+2+'px';
			}
		}
		function moveLeft(){
			var preLeft=o.offsetLeft;
			if (preLeft<=-200) {
				clearInterval(timer);
			}else {
				o.style.left=o.offsetLeft-2+'px';
			}
		}
	};
	</script>
</head>
<body>
	<div id="ad">
		<span>为你推荐</span>
	</div>
</body>
</html>