首頁(yè) 猿問(wèn) 入門(mén)JS自編簡(jiǎn)單圖像移動(dòng)...

入門(mén)JS自編簡(jiǎn)單圖像移動(dòng) 然而并沒(méi)辦法執(zhí)行求解答萬(wàn)分感謝！

JavaScript

KokoTa 2015-09-19 20:47:40

<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var div = document.getElementById('div'); var img = div.getElementsByTagName('img'); var ten = 10; var input = document.getElementById('input'); input.onclick = function(){ setInterval(function(){ var left = parseInt(img[0].marginLeft); left += ten + 'px'; },100) } } </script> <style> #div{width:1000px; background: gray; display: block;position: absolute;} img{width: 100px;height: 100px; display: block;position: relative;} input{margin-top:100px;} </style></head><body><div id="div"> <img src="C:\Users\Administrator\Pictures\51607230_p0.png"></div><input type="button" value="click" id="input"></body></html>（不要在意圖片），為什么點(diǎn)了Input 圖不動(dòng)？

查看完整描述

1 回答

已采納

pardon110

TA貢獻(xiàn)1038條經(jīng)驗(yàn) 獲得超227個(gè)贊

marginLeft在js中使用錯(cuò)誤,用style.marginLeft取值，注意：取值對(duì)象必須有相應(yīng)的內(nèi)聯(lián)樣式。
關(guān)鍵點(diǎn)獲取新值后，未給要移動(dòng)的對(duì)象添加值。
修改后的代碼如下

<!DOCTYPE?html>
<html>
<head>
	<meta?charset?=?"utf-8">
	<title></title>
	<script?type="text/javascript">
		window.onload?=?function(){
			var?div?=?document.getElementById('div');
			var?img?=?div.getElementsByTagName('img');
			var?ten?=?10;
			var?input?=?document.getElementById('input');
			input.onclick?=?function(){
					setInterval(function(){
					var?left?=?parseInt(img[0].style.marginLeft);
					left?+=?ten;
					img[0].style.marginLeft?=?left+"px";
				},100)
			}
			
		}
	</script>
	<style>
		#div{width:1000px;?background:?gray;?display:?block;position:?absolute;}
		img{width:?100px;height:?100px;?display:?block;position:?relative;}
		input{margin-top:100px;}
	</style>
</head>
<body>
<div?id="div">
	<img?src="C:\Users\Administrator\Pictures\51607230_p0.png"?style="margin-left:0px">
</div>
<input?type="button"?value="click"?id="input">
</body>
</html>

反對(duì) 回復(fù) 2015-09-22