http://runjs.cn/code/2wx9bne6 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>模拟windows邮件等待加载效果</title> <style type="text/css"> *{ padding: 0; margin: 0;} body{ text-align: center;} #wrap{ width: 800px; height: 50px; border: 1px solid #0a7288; margin: 100px auto; position: relative; overflow: hidden;} #wrap span{ display: block; width:10px; height: 10px; background:#0a7288; border-radius: 50%; position: absolute; top: 50%; margin-top: -5px; left: -50px;} </style> </head> <body> <div id="wrap"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <button id="clickObj">刷新</button> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> <script type="text/javascript"> var obj = document.getElementById('wrap'); var moveObj = obj.getElementsByTagName('span'); var wid = obj.clientWidth; document.getElementById("clickObj").onclick = init; function init() { for (var i=0; i<moveObj.length; i++){ (function(i){ setTimeout(function(){ move(moveObj[i],wid); },i*300); })(i); } } function move(obj,tagMove) { var moveGo = 0; var step = 0; var timer = null; var nowMove = tagMove/2; autoMove(); function autoMove() { step = Math.ceil(nowMove/10); moveGo += step; if(moveGo>=tagMove/2){ nowMove += step; }else{ nowMove -= step; } obj.style.left = moveGo+'px'; if(moveGo>=tagMove){ clearTimeout(timer); }else{ timer = setTimeout(autoMove,20) } } } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 模拟windows邮件等待加载效果 喜欢 (0)or分享 (0)
