图片点击隐藏 js运动效果原理

时间：5年前阅读：6293

1、点击让图片隐藏

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript">    
			window.onload = function(){    
				document.getElementById('dd').onclick = function(){    
					document.getElementById("tt").style.display="none";    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="点击我呀" />    
		<br /><br />    
		<img src="https://www.qiquanji.com/data/img/dmj/201902131550032408323289.jpg" alt="" id="tt"/>    
	</body>    
</html>

2、运动原理

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#dt{    
				position: absolute;    
				/*为了能获得当前图片的left值,把left值写在body里面*/    
				/*left: 0px;*/    
				top: 100px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){			
    
//			先抓元素    
			var yy =document.getElementById('yy');    
			var dt = document.getElementById('dt');    
//			给按钮加单机事件    
			yy.onclick = function(){    
//				设置一个定时器,每隔一秒钟,将left值变大10个像素;    
				setInterval(function(){    
//					获得当前图片的left值    
				var ww = dt.style.left;    
//				计算新的left值    
				var dd = parseInt(ww)+10;    
//				将新值赋值回去    
				dt.style.left= dd+'px';    
				},1000)    
			}    
			}    
		</script>    
	</head>    
	<body>    
		<input type="button" name="yy" id="yy" value="点我呀！！" />    
		<br /><br />    
		<!--为了能获得当前图片的left值,把left值写在body里面-->    
		<img src="https://www.qiquanji.com/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/>    
	</body>    
</html>

3、停止运动

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#dt{    
				position: absolute;    
				/*为了能获得当前图片的left值,把left值写在body里面*/    
				/*left: 0px;*/    
				top: 100px;    
			}    
			/*后加上去的*/    
			#qian{    
				position: absolute;    
				top: 0px;    
				left: 1035px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){			
    
//			先抓元素    
			var yy =document.getElementById('yy');    
			var dt = document.getElementById('dt');    
//			给按钮加单机事件    
			yy.onclick = function(){    
//				设置一个定时器,每隔十分之一秒钟,将left值变大5个像素;    
//				给定时器取个名字,要不然清理不到它    
				var dsc= setInterval(function(){    
//					获得当前图片的left值    
				var ww = dt.style.left;    
//				计算新的left值    
				var dd = parseInt(ww)+5;    
//				将新值赋值回去    
				dt.style.left= dd+'px';    
//				判断图片是否停止了    
				if (dd==600) {    
//					清理定时器,让运动停止    
					clearInterval(dsc);    
				} else{    
				}    
				},100)    
			}    
			}    
		</script>    
	</head>    
	<body>    
		<input type="button" name="yy" id="yy" value="点我呀！！" />    
		<br /><br />    
		<!--为了能获得当前图片的left值,把left值写在body里面-->    
		<img src="https://www.qiquanji.com/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/>    
		<!--后加上去的-->    
		<img src="https://www.qiquanji.com/data/img/dmj/201902131550032567214401.jpg" alt="" id="qian"/>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

图片点击隐藏 js运动效果原理

网友评论