js网页按钮控制网页图片运动速度的代码

2016-07-01 网页编程网 网页编程网

<html><head><title>按钮控制图片运动</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>

阅读原文

阅读 3885

123 显示电脑版