<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV动起来</title>
<link href="初始化CSS.css" rel="stylesheet" type="text/css"/>
<style>
#div1 {
width: 150px;
height: 150px;
border: 4px solid #00ffff;
border-radius: 50%;
/* margin:50px;*/
position: relative;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
}
</style>
<script>
window.onload=function () {
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var timer=null;
oBtn.onclick=function () {
timer=setInterval( function () {
if (oDiv.offsetLeft>=400)
clearInterval(timer);
oDiv.style.left=oDiv.offsetLeft+1+'px';
},30);
}
}
</script>
</head>
<body>
<input id='btn1' type="button" value="start"/>
<div id="div1">
<img src="img1/萌.jpeg" alt=""/>
</div>
</body>
</html>
相关分类