JS运动“分享到”侧边栏

原创于 2018-09-28 15:01:23 发布 · 466 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS运动基础

js代码专栏收录该内容

8 篇文章

订阅专栏

利用js运动的基础，设计出侧边栏，在网站的前端中运用的相对广泛的框架
实现侧边栏的代码如下，小编这里只是提供了具体思路，里面的优化还需要读者们自由发挥。
代码中的注释是小编在不断地进行代码优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分享栏的搭建</title>
		<style type="text/css">
			#div1 {width: 150px; height: 200px; background: greenyellow; position: absolute; left: -150px;}
			#div1 span {position: absolute; width: 20px; height: 60px; line-height: 20px; background: deepskyblue; right: -20px; top: 70px; }
		</style>
		<script type="text/javascript">
			window.onload = function () {
				var odiv = document.getElementById('div1');
				
				odiv.onmouseover=function () {
//					startMove(10, 0);添加参数的方法代码
					startMove();
				};
				
				odiv.onmouseout = function () {
//					startMove(-10, -150);
                    startMove();
				}
				
			};
			
			var timer = null;
			//优化代码可以用添加参数的方法
			function startMove(iTarget) {
				var oDiv = document.getElementById('div1');
				
				clearInterval(timer);
				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)
			}
			//未优化前的代码
//			function startMove2() {
//				var oDiv = document.getElementById('div1');
//				
//				clearInterval(timer);
//				timer = setInterval(function () {
//					if (oDiv.offsetLeft == -150) {
//						clearInterval(timer);
//					} else{
//						oDiv.style.left = oDiv.offsetLeft - 10+'px';
//					}
//				},30)
//			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span>分享到</span>
		</div>
	</body>
</html>

运行前