1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

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/post/7618.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: