zoukankan      html  css  js  c++  java
  • js实现向上滚动效果

    源码:

    <style type="text/css">
    #up_zzjs{border:1px solid #ccc;170px;height:182px;line-height:20px;overflow:hidden;}
    #up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
    /*系统支持ie8就选line-height:16px;,但不支持opera 否则选line-height:20px;*/
    #up_zzjs #up_li a{font-size:12px; line-height:16px;}
    </style>
    <div id="up_zzjs">
    <ul id="marqueebox" style="border:1px red solid;">
    <li id="up_li">
    <a href="http://www.zzjs.net/" target="_blank">
    <span style="color:#FF0000">滚动文字一号</span></a>
    </li>
    <li id="up_li">
    <a href="http://www.zzjs.net/" target="_blank">
    <span style="color:#3333FF">滚动文字三号</span></a>
    </li>
    <li id="up_li">
    <a href="http://www.zzjs.net/" target="_blank">
    <span style="color:#3333FF">滚动文字五号</span></a>
    </li>
    <li id="up_li">
    <a href="http://www.zzjs.net/" target="_blank">
    <span style="color:#3333FF">滚动文字七号</span></a>
    </li>
    </ul>
    </div>
    <script language="javascript">
    function startmarquee(lh,speed,delay) {
    var p=false;
    var t;
    var o=document.getElementById("marqueebox");
    o.innerHTML+=o.innerHTML;
    o.style.marginTop=0;
    o.onmouseover=function(){p=true;}
    o.onmouseout=function(){p=false;}
    function start(){
    t=setInterval(scrolling,speed);
    if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
    }
    function scrolling(){
    if(parseInt(o.style.marginTop)%lh!=0){
    o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
    if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
    }else{
    clearInterval(t);
    setTimeout(start,delay);
    }
    }
    setTimeout(start,delay);
    }
    startmarquee(20,20,1500); // 第一个参数为上升的高度,第二个为速度
    </script>


    说明,在ul <ul id="marqueebox" 设置一个固定大小高度的div <div id="up_zzjs">,ul会一直向上跑。
    我生活的地方,我为何要生活。
  • 相关阅读:
    数据仓库与数据挖掘的一些基本概念
    System.currentTimeMillis();
    html练习(3)
    HDU 1556 Color the ball【算法的优化】
    ubuntu12.04 安装配置jdk1.7
    java中的switch用String作为条件
    oracle中 connect by prior 递归算法
    C#复习题
    AngularJS:Http
    AngularJS:Service
  • 原文地址:https://www.cnblogs.com/hsd1727728211/p/5330603.html
Copyright © 2011-2022 走看看