简单的走马灯效果
程序员文章站
2022-07-14 17:50:24
...
上次看一帖子,说百度面试出了一个走马灯.自己随便写了一个,记录下来.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style type="text/css"> *{ margin:0 0; padding:0 0; } #outDemo{ overflow:hidden; width:200px; border:2px solid #e0e0e0; padding:2px; } #outDemo div{ float:left; padding:1px; } #innDemo{ white-space:nowrap; } img{ border:0px solid #fff; } </style> <script type="text/javascript"> window.onload = function(){ var demo = document.getElementById("outDemo"); var demo1 = document.getElementById("innDemo"); demo1.innerHTML += demo1.innerHTML; function move(){ demo.scrollLeft = demo.scrollLeft==240?demo.scrollLeft=1:demo.scrollLeft+1; } function go(){ setInterval(move,20); } go(); } </script> </head> <body> <div id='outDemo'> <div id='innDemo'> <a href='javascript:;'><img src="images/apple439.PNG" alt="apple439.PNG" width="111px" /></a> <a href='javascript:;'><img src="images/apple440.PNG" alt="apple440.PNG" width="111px" /></a> </div> </div> </body> </html>
推荐阅读