1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>中国站长天空-网页特效-文本特效-兼容各种浏览器的文字循环无缝滚动效果</title> 5 <meta http-equiv="content-type" content="text/html;charset=gb2312"> 6 <!--把下面代码加到<head>与</head>之间--> 7 <style type="text/css"> 8 *{margin:0;padding:0;} 9 body{font:12px/1.5 Tahoma;} 10 div{position:absolute;margin:0px;padding:0px;left:0px;top:0px;400px;overflow:hidden;height:20px;} 11 #gd{position:absolute;margin:0px;padding:0px;left:0px;top:0px;800px;height:20px;} 12 a{padding:5px;} 13 #gd li{list-style-type:none;white-space:nowrap;} 14 #gd li span{zoom:1} 15 </style> 16 </head> 17 <body> 18 <!--把下面代码加到<body>与</body>之间--> 19 <div> 20 <ul id="gd"> 21 <li> 22 <span> 23 <a href="#">中国站长天空，站长建站乐园</a> 24 <a href="#">可乐猫－对人随缘，对事随心</a> 25 <a href="#">百度一下，你就知道</a> 26 </span> 27 </li> 28 </ul> 29 </div> 30 <script language="javascript"> 31 var oUl = document.getElementById('gd'); 32 var oLi = oUl.getElementsByTagName('li')[0]; 33 oLi.getElementsByTagName('span')[0].style.marginLeft = 0; 34 oLi.appendChild(oLi.getElementsByTagName('span')[0].cloneNode(true)) 35 var timer = null,isMove=true; 36 timer = setInterval(move, 30); 37 function move() { 38 if(!isMove) return; 39 var spanDom = oLi.getElementsByTagName('span')[0]; 40 spanDom.style.marginLeft = parseInt(spanDom.style.marginLeft,10) - 2 + "px"; 41 if (Math.abs(parseInt(spanDom.style.marginLeft,10)) > parseInt(spanDom.offsetWidth,10)) { 42 spanDom.style.marginLeft = 0; 43 oLi.appendChild(spanDom) 44 } 45 } 46 oUl.onmouseover = function() { 47 isMove=false; 48 } 49 oUl.onmouseout = function() { 50 isMove=true; 51 } 52 </script>