JavaScript学习（五）

JS运动效果实例

最新推荐文章于 2025-09-10 16:16:57 发布

weixin_33918114

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/are1OfBlog/blog/300733

本文提供了多个JavaScript实现的页面元素运动效果实例，包括简单的水平移动、鼠标悬停显示隐藏、淡入淡出效果、缓冲运动及右侧悬浮框跟随滚动等。通过这些实例，读者可以了解如何使用JavaScript控制DOM元素的位置、透明度等属性。

2019独角兽企业重金招聘Python工程师标准>>>

JS运动基础

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			/*如果样式里面没有left值，那么下面判断oDiv.offsetLeft == 300使它停下来将不起作用*/
			#div1 {width: 100px; height: 100px; position: absolute; background: red; left: 0px}
		</style>
		<script type="text/javascript">
			// 当点击按钮会发现运动越来越快，因为
			// 点击一次会开启一个setInterval，所以在开启setInterval之前
			// 需要先清除一下之前的setInterval
			var timer = null;
			function toMove() {
				// 当div停下后，点击按钮还是会往前走
				// 因为setInterval至少会执行一次，清除setInterval的时候
				// 是在下一次执行的时候清除
				// 加个else就可以让停下点击后不在运动
				var oDiv = document.getElementById('div1');
				// 如果想让div运动慢一点，最好不要动setInterval中的时间
				// 将时间改大的话，会造成运动时很卡的感觉
				// 最好的方法是改speed的值，即每次运动的距离
				var speed = 1;
				clearInterval(timer);
				timer = setInterval(function(){
					// 当大于等于300的时候，是停在301的地方（以后研究）
					if(oDiv.offsetLeft >= 300) {
						clearInterval(timer);
					} else {
						oDiv.style.left = oDiv.offsetLeft + speed + 'px';
					}
				}, 30);
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="运动" onclick="toMove();" />
		<div id="div1"></div>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>分享到</title>
		<style type="text/css">
			/*如果想让div1收在里面，就是设置left为-150px，因为宽为150px*/
			#div1 {width: 150px; height: 200px; background: green; position: absolute; left: -150px}
			/*right等于-20px，因为width为20px*/
			#div1 span {width: 20px; height: 60px; position: absolute; line-height: 20px; background: blue; right: -20px; top: 70px;}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				// oDiv.onmouseover = function() {
				// 	toMove(10, 0);
				// }
				// oDiv.onmouseout = function() {
				// 	toMove(-10, -150);
				// }
				oDiv.onmouseover = function() {
					toMove(0);
				}
				oDiv.onmouseout = function() {
					toMove(-150);
				}
			}

			var timer = null;
			// function toMove (iTarget) {
			// 	oDiv = document.getElementById('div1');
			// 	clearInterval(timer);
			// 	timer = setInterval(function(){
			// 		if(oDiv.offsetLeft == iTarget) {
			// 			clearInterval(timer);
			// 		} else {
			// 			oDiv.style.left = oDiv.offsetLeft + speed + 'px';
			// 		}
			// 	}, 30);
			// }
			function toMove(iTarget) {
				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);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span>分享到</span>
		</div>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出</title>
		<style type="text/css">
			/*filter设置透明度*/
			#div1 {width: 200px; height: 200px; background: red; filter: alpha(opacity: 30); opacity: 0.3}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				oDiv.onmouseover = function() {
					toMove(100);
				}
				oDiv.onmouseout = function() {
					toMove(30);
				}
			}
			var alpha = 30;
			var timer = null;
			function toMove (iTarget) {
				var oDiv = document.getElementById('div1');
				clearInterval(timer);
				timer = setInterval(function(){
					var speed = 0;
					if (alpha < iTarget) {
						speed = 10;
					} else {
						speed = -10;
					};
					if (alpha == iTarget) {
						clearInterval(timer);
					} else {
						alpha += speed;

						oDiv.style.filter = 'alpha(opacity: ' + alpha + ')';
						oDiv.style.opacity = alpha / 100;
					};
				}, 30);
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>缓冲运动</title>
		<style type="text/css">
			#div1{width: 100px; height: 100px; background: red; position: absolute; left: 0px; top: 50px}
			#div2{width: 1px; height: 500px; background: black; position: absolute; left: 300px; top: 0px}
		</style>
		<script type="text/javascript">
			function toMove () {
				var oDiv = document.getElementById('div1');

				setInterval(function(){
					// 想要改变移动的速度，只要改变除数的大小就可以了
					var speed = (300 - oDiv.offsetLeft) / 10;
					// 这里增加了一行代码，用来确保无论是向右运动还是向左运动，都能保证div运动到300px停止。
					// Math.ceil()向上取整，即向前进一位，Math.floor()向下取整，即舍去小数点。
					// 像素没有小数，默认舍去小数点，即在像素291.5px处，其实是在291px处
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					oDiv.style.left = oDiv.offsetLeft + speed + 'px';

					document.title = oDiv.offsetLeft;
				}, 30);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始运动" onclick="toMove();" />
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

<!DOCTYPE HTML>
<!-- 这里的DOCTYPE必须声明为HTML，否则会出错 -->
</body>
</html>
<html>
	<head>
		<meta charset="utf-8">
		<title>右侧悬浮框</title>
		<style>
			#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
		</style>

		<script type="text/javascript">
			window.onscroll = function ()
				{
					var oDiv = document.getElementById('div1');
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					
					// oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px';
					// 因为他的距离在858.5，他会在858和859之间来回的抖动
					// 加上一个parseInt去掉小数
					startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
				};
			var timer = null;
			function startMove(iTarget) {
				var oDiv = document.getElementById('div1');
				clearInterval(timer);
				timer = setInterval(function() {
					var speed = (iTarget - oDiv.offsetTop) / 4;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if (oDiv.offsetTop == iTarget) {
						clearInterval(timer);
					} else {
						oDiv.style.top = oDiv.offsetTop + speed + 'px';
					};
				}, 30);
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="div1"></div>
	</body>
</html>

转载于:https://my.oschina.net/are1OfBlog/blog/300733