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;width:400px;overflow:hidden;height:20px;}
11 #gd{position:absolute;margin:0px;padding:0px;left:0px;top:0px;width: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>
时间： 2024-12-09 14:32:22