<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS动画效果1</title>
<script src = "script.js"></script>
<style>
*{ margin : 0;
padding: 0;
}
.head{
width: 500px;
height: 300px;
padding-top: 100px;
}
.head #first{
width: 400px;
height: 300px;
background: red;
float: left;
}
.head #second{
width:100px;
height: 100px;
background:blue;
float: left;
}
</style>
</head>
<body>
<div id = "head">
<span id = "first">first</span>
<span id = "second">second</span>
</div>
</body>
</html>
这是JS代码
var timer = null;
window.onload = function(){
var first = document.getElementById("first");
first.onclick = active;
}
function active(){
var first = document.getElementById("first");
timer = setInterval(function(){
first.style.left = first.offsetLeft + 10 + 'px';
}, 30);
}
慕粉3557130
相关分类