<!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);}
添加回答
举报
0/150
提交
取消