38、JavaScript的运动----分享到侧边栏

最新推荐文章于 2019-04-18 19:11:18 发布

原创最新推荐文章于 2019-04-18 19:11:18 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JavaScript的运动 #JavaScript的侧边栏分享

JavaScript_Bak 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了使用HTML、CSS及JavaScript实现侧边栏动画效果的方法。通过两种不同的函数定义方式，实现了侧边栏的展开与收起动画。一种是直接传递速度参数控制动画速度，另一种则是通过目标位置自动计算合适的速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、“分享到”侧边栏

1.1 传三个参数的函数(运动对象的id,速度,目标点)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 {
				width: 100px;
				height: 200px;
				background: #CCC;
				position: absolute;
				/*用于隐藏*/
				left: -100px;
			}
			
			#div1 span {
				width: 20px;
				height: 60px;
				line-height: 20px;
				text-align: center;
				left: 100px;
				top: 70px;
				background: yellow;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				oDiv.onmouseover = function() {
					startMove('div1', 10, 0);
				}
				oDiv.onmouseout = function() {
					startMove('div1', -10, -100);
				}
			}
			var timer = null;
			/**
			 * 运动框架的实现
			 * @param {Object} objId 要运动的对象的id
			 * @param {Object} iSpeed 运动的速度
			 * @param {Object} iTarget 运动的目标点
			 */
			function startMove(objId, iSpeed, iTarget) {
				var oDiv = document.getElementById(objId);
				clearInterval(timer);
				timer = setInterval(function() {
					if (oDiv.offsetLeft == iTarget) {
						clearInterval(timer);
					} else {
						oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
					}
				}, 30);
			}
		</script>
	</head>

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

</html>

1.2 传两个参数的函数(运动对象的id,目标点)

– 通过目标点,计算速度值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 {
				width: 100px;
				height: 200px;
				background: #CCC;
				position: absolute;
				left: -100px;
			}
			
			#div1 span {
				width: 20px;
				height: 60px;
				line-height: 20px;
				text-align: center;
				left: 100px;
				top: 70px;
				background: yellow;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				oDiv.onmouseover = function() {
					startMove('div1', 0);
				}
				oDiv.onmouseout = function() {
					startMove('div1', -100);
				}
			}
			var timer = null;
			/**
			 * 实现运动的框架
			 * @param {Object} objID  要运动的对象的id
			 * @param {Object} iTarget 运动的目标点
			 */
			function startMove(objID, iTarget) {
				var oDiv = document.getElementById(objID);
				clearInterval(timer);
				timer = setInterval(function() {
					var iSpeed = 0;
					/**
					 * 通过目标点,来计算运动的速度大小
					 */
					if (oDiv.offsetLeft < iTarget) {
						iSpeed = 10;
					} else {
						iSpeed = -10;
					}
					if (oDiv.offsetLeft == iTarget) {
						clearInterval(timer);
					} else {
						oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
					}
				}, 30);
			}
		</script>
	</head>

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

</html>