• 兼容各种浏览器的文字循环无缝滚动效果


     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>
  • 相关阅读:
    关于python的装饰器(初解)
    关于python的创立模块和导入
    2019年春季学期第五周作业
    2019年春季学期第四周作业
    2019年春季学期第三周作业
    pytest
    Python中if __name__ == '__main__':的作用和原理
    oracle中的游标
    oracle中的一些小知识点
    python中str()与repr()函数的区别
  • 原文地址:https://www.cnblogs.com/-lpf/p/4898844.html
Copyright © 2020-2023  润新知