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会一直向上跑。
    我生活的地方,我为何要生活。
  • 相关阅读:
    HUD 1284 钱币兑换问题
    HUD 1284 钱币兑换问题
    HDU 1283 最简单的计算机
    HDU 1283 最简单的计算机
    商品搜索引擎---推荐系统设计
    Spark机器学习:TF-IDF实例讲解
    【读书笔记】Elasticsearch集成Hadoop最佳实践
    Java面试题集合
    Spring Boot企业微信点餐系统-第一章-课程介绍
    Eclipse下svn的创建分支/合并/切换使用
  • 原文地址:https://www.cnblogs.com/hsd1727728211/p/5330603.html
Copyright © 2011-2022 走看看