JavaScript走马灯效果
JavaScript实现走马灯效果的关键是设置外容器的scrollTop或者其它相应的属性。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>走马灯</title><style type="text/css">*{padding:0;margin:0;border:none;}div{width:200px;height:20px;overflow:hidden;margin:auto;}li{margin-left:2em;height:20px;line-height:20px;}</style></head><body><div id="news"> <ul> <li>xxxxxxxxxxxxxxxxxxxxxxx1</li> <li>xxxxxxxxxxxxxxxxxxxxxxx2</li> <li>xxxxxxxxxxxxxxxxxxxxxxx3</li> <li>xxxxxxxxxxxxxxxxxxxxxxx4</li> <li>xxxxxxxxxxxxxxxxxxxxxxx5</li> <li>xxxxxxxxxxxxxxxxxxxxxxx6</li> <li>xxxxxxxxxxxxxxxxxxxxxxx7</li> <li>xxxxxxxxxxxxxxxxxxxxxxx1</li> </ul></div><script type="text/javascript">var obj = document.getElementById("news");obj.scrollTop = 0;var num = 0;var interval = new Array();function roll(){obj.scrollTop++;if(/^\d+$/.test(obj.scrollTop / 20)){clearInterval(interval);num ++;if(num >= 7){num = 0;obj.scrollTop = 0;}}}function startRoll(){interval = setInterval("roll()",20);}interval = setInterval("startRoll()",3000);</script></body></html>
页:
[1]