封装函数，分享侧边栏移入移出

最新推荐文章于 2022-04-28 20:11:48 发布

原创最新推荐文章于 2022-04-28 20:11:48 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #侧边栏 #web

模块功能代码专栏收录该内容

13 篇文章

订阅专栏

	**div样式**
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#all{
			width: 200px;
			height: 200px;
			margin-top: 20px;
			background-color: lightblue;
			position: relative;
			left: -200px;
			top: 0;
		}				
		#btn{
			width: 20px;
			background: rgb(255, 119, 157);
			position: absolute;
			left: 200px;
			top: 75px;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
			padding: 5px 1px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
	</style>

<body>
	<div id="all">
		<div>你是不是傻</div>
		<span id="btn">分享</span>
	</div>
	
		


	**//JS代码**
	<script type="text/javascript">
		var oAll=document.getElementById("all");
		
		oAll.onmouseover=function(){
			startMove(oAll,0,7,20);
		}
		
		oAll.onmouseout=function(){
			startMove(oAll,-200,-7,20);
		}
		

		**函数封装代码公式**
		function startMove(obj,targetPosition,speed,time){
			clearInterval(obj.timer)
			obj.timer = setInterval(function(){
				if(Math.abs(targetPosition-obj.offsetLeft)<=Math.abs(speed)){
					obj.style.left=targetPosition+"px";
				}else{
					obj.style.left=obj.offsetLeft+speed+"px";
				}
			console.log("offset: "+ obj.offsetLeft);
			},time);
		}

	</script>