网页上的一些广告文字,一直会滚动是怎么做到的,今天给大家演示下,非常简单,源码如下(本案例是在.net平台上,但HTML是通用的):
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"><!--这个很重要,要加上--> <title>荧光屏文字 滚动效果</title> <style type="text/css"> #scrollobj{ white-space:nowrap; overflow:hidden; 200px; margin:50px; float:left; } </style> <script type="text/javascript"> function scroll(obj){ var tmp=(obj.scrollLeft)++; if(obj.scrollLeft==tmp){ obj.innerHTML += obj.innerHTML; } if(obj.scrollLeft>=obj.firstChild.offsetWidth){ obj.scrollLeft=0; } } setInterval("scroll(document.getElementById('scrollobj'))",50);//用来控制时间,数字越大则滚动越慢,数字越小滚动越快。 </script> </head> <body> <div id="scrollobj">欢迎光临~</div> </body> </html>
演示效果如下,没有录制视频,自己按源码尝试下即可: