zoukankan      html  css  js  c++  java
  • Js间断/连续的文字滚动代码

                                                         Js间断/连续的文字滚动代码

      • Js文字滚动代码,可设置间断滚动和连续滚动。滚动时是向上滚动的,控制Li列表滚动,兼容性表现地不错,兼容IE/火狐、Opera等浏览器,代码如下:

        01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
        02 <html>
        03 <head>
        04 <title>文字间隔滚动代码-兼容IE和FireFox</title>
        05 <style type="text/css">
        06 <!--
        07 body {
        08     text-align:center;
        09 }
        10 ul{
        11 margin:0px;
        12 padding:0px;
        13 list-style:none;
        14 }
        15 #andyscroll {
        16     overflow: hidden;
        17     background: #E8F8F8;
        18     padding: 0 10px;
        19     text-align: left;
        20     400px;
        21     height:100px;
        22     overflow:hidden;
        23 }
        24 #andyscroll a {
        25     font:12px/18px tahoma;
        26     color: #000;
        27     float:left;
        28     100%;
        29     text-decoration: none;
        30     display:block;
        31 }
        32 #andyscroll a:hover {
        33     font:12px/18px tahoma;
        34     color: #F60;
        35 }
        36 -->
        37 </style>
        38 </head>
        39 <body>
        40 <div id="andyscroll">
        41 <div id="scrollmessage">
        42 <UL>
        43 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        44 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        45 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        46 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        47 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
        48 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        49 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
        50 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
        51 <ul>
        52 </div>
        53 </div>
        54 <script type="text/javascript">
        55 var stopscroll = false;
        56 var scrollElem = document.getElementById("andyscroll");
        57 var marqueesHeight = scrollElem.style.height;
        58 scrollElem.onmouseover = new Function('stopscroll = true');
        59 scrollElem.onmouseout  = new Function('stopscroll = false');
        60 var preTop = 0;
        61 var currentTop = 0;
        62 var stoptime = 0;
        63 var leftElem = document.getElementById("scrollmessage");
        64 scrollElem.appendChild(leftElem.cloneNode(true));
        65 init_srolltext();
        66 function init_srolltext(){
        67     scrollElem.scrollTop = 0;
        68     setInterval('scrollUp()', 35);//确定滚动速度的, 数值越小, 速度越快
        69 }
        70 function scrollUp(){
        71     if(stopscroll) return;
        72     currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
        73     if(currentTop == 19) {
        74         stoptime += 1;
        75         currentTop -= 1;
        76         if(stoptime == 180) {
        77             currentTop = 0;
        78             stoptime = 0;
        79         }
        80     }else{
        81         preTop = scrollElem.scrollTop;
        82         scrollElem.scrollTop += 1;
        83         if(preTop == scrollElem.scrollTop){
        84             scrollElem.scrollTop = 0;
        85             scrollElem.scrollTop += 1;
        86         }
        87     }
        88 }
        89 </script>
        90 </body>
        91 </html>

  • 相关阅读:
    unix网络编程源码编译问题
    ubuntu15.04下安装docker
    hexo博客的相关配置
    hexo的jacman主题配置
    使用github和hexo搭建静态博客
    操作系统简单认识
    github for windows安装以及教程
    编译原理第五单元习题
    python3入门之列表和元组
    Python3入门之软件安装
  • 原文地址:https://www.cnblogs.com/lizonghai/p/4639779.html
Copyright © 2011-2022 走看看