按鈕控制網頁里圖片既運行，而且仲可以控制運行速度呢！大家測試下！！如果你總是一直點“click me”則運動速度會很快啊！呵呵！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>按鈕控制圖片運動-webjx.com</title>
<style type="text/css">
div#top {
position: relative;
top: 50px;
left: 200px;
z-index: 10;
width: 200px;
height: 200px;
background-color: red;
}
div#top button {
margin-left: 50px;
}
</style>
</head>
<body style="overflow-x:hidden;width:1280px;">
<script type="text/javascript">
var left1 =0;
var i = 0;
var set;
function dong() {
document.getElementById("img").style.left = (left1 + i) + 'px';
i = i + 10;
set = setTimeout('dong();', 100);
if (i == 1010) {
document.getElementById("img").style.left=0+'px';
i=0;
}
}
</script>
<div id="top">
<button type="button" onclick="dong();">click me</button>
</div>
<div id="img" style="position:absolute;top:300px;left:0px;height:300px;">
<div id="img1" style="position:absolute;top:0px;left:0px;border:1px solid black;">
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
<div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;">
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
</div>
</body>
</html>
網頁設計網頁設計
留言列表
