javascript侧边提示框

最新推荐文章于 2023-09-20 08:52:36 发布

老李的花花世界

最新推荐文章于 2023-09-20 08:52:36 发布

阅读量775

点赞数

分类专栏： js小功能文章标签： js 侧边提示框

本文链接：https://blog.csdn.net/qq_43076883/article/details/82692750

版权

js小功能专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		#box{width: 150px;height: 200px;background: skyblue;position: fixed;top: 400px;left: -150px;}
		#box span{background: red;width: 20px;display: inline-block;position: absolute;left: 150px;
			top: 50%;height: 90px;margin-top: -45px;}
	</style>
	<script type="text/javascript">
		window.onload=init;
		function init() {
			var o=document.getElementById('box');
			var speed=5;//速度
			var timer;
			//鼠标事件
			o.onmouseenter=function(){
				clearInterval(timer);//清除定时器
				timer=setInterval(moveRight,50);
			};
			//鼠标离开事件
			o.onmouseleave=function(){
				clearInterval(timer);//清除定时器
				timer=setInterval(moveLeft,50);
			};

			//滑块移动
			function moveRight(){
				var l=o.offsetLeft;//左边距
				if(l>=0){
					clearInterval(timer);//停止
				}else{
					o.style.left=l+speed+'px';	//移动
				}
				
			}
			//向左移动
			function moveLeft(){			
				var l=o.offsetLeft;//左边距				
				if(l<=-150){
					clearInterval(timer);
				}else{
					o.style.left=l-speed+'px';	
				}
			}
		}
	</script>
</head>
<body>
	<div id="box">
		<span>更多文章</span>
	</div>
</body>
</html>