利用setInterval实现简单的滑动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单滑动效果</title> <style type = 'text/css'> #btn { width:45px; height:25px; } #box1 { position:relative; top:15px; width:100px; height:100px; background:yellow; border:2px solid red; } </style> </head> <body> <button id="btn">提交</button> <div id = 'box1'> </div> </body> <script type = 'text/javascript'> var box1 = document.getElementById("box1"); var btn = document.getElementById("btn"); var count = 0; var time = null; btn.onclick = function(){ time = setInterval(function(){ count += 2; if(count === 1000){ clearInterval(time); box1.style.display = "none"; } box1.style.left = count + "px" },10) } </script> </html>