信息滚动:marquee&&js-原创手记-慕课网

marquee标签信息滚动

注意：该标签已经被废弃,在html5使用css3的若干属性即可实现信息滚动,但滚动的原理是相同的。

语法：<marquee>信息滚动</marquee>
   属性：
       behavior：滚动的方式
          alternate:表示在两端之间来回滚动
          scroll:表示有一段滚动到另一端(会重复)
          slide:表示有一段滚动到另一端(不会重复)
       direction：滚动的方向
          down:向下
          up:
          left:向左
          right:
       loop：滚动的次数
          -1:不限次数,一直滚动下去
          num:指定滚动的次数
       scrollamount：活动字幕滚动的速度
          num:单位像素
       scrolldelay：活动字幕两次之间的延迟时间
           num:单位毫秒
   方法： 绑定事件时,可以直接使用
        this.stop():使该滚动效果停止
        this.start():恢复滚动效果

 实例：
        html:
        <marquee onmouseover="this.stop()" onmouseout="this.start()"  
            loop=-1  behavior="alternate" height=100px width="150" 
        height="30">信息滚动</marquee>

  注意：这里面width和height是指滚动区域将在该范围内部滚动。

js 信息滚动

文字信息无缝滚动

无缝滚动原理
        不需使用marquee标签即可实现,是通过克隆两个完全一样的标签内容。
        这两个内容之间彼此相连,当第一个滚动完时,会立即滚动第二个。
        同时第二个滚动完时，通过调节第一个的卷去距离,使之在第二个的后面,
        这样不断循环即可实现无缝滚动。

无缝滚动制作
实例
    html:
    <div overflow="hidden" width="100px" height="50px" 
    id="moocBox">
        <ul id="con1">
            <li>1.学会html5 绝对的屌丝逆袭</li>
            <li>2.tab页面切换效果</li>
            <li>3.圆角水晶按钮制作</li>
            <li>4.HTML+CSS基础课程</li>
            <li>5.分页页码制作</li>
            <li>6.导航条菜单的制作</li>
            <li>7.信息列表制作</li>
            <li>8.下拉菜单制作</li>
            <li>9.如何实现“新手引</li>
        </ul>
        <ul id="con2">
        </ul>
    </div>

    js:
    var area = document.getElementById("moocBox")
    var con1 = document.getElementById("con1")
    var con2 = document.getElementById("con2")
    //实现内容的克隆
    con2.innerHTML=con1.innerHTML
    var time = null;
    //控制滚动的速度
    var speed='24px'
    //注意此时实现的是包含con1,con2的area的滚动
            而不单单是一个内容的滚动
    function scrollUp(){
        //如果已经滚玩了一个内容的高度,则改变它的scrollTop
        if(area.scrollTop==con1.offsetHeight){
            area.srollTop=0
        }
        area.scrollTop+=speed
    }
    time = setInterval("scrollUp()",500)

鼠标悬停事件
    当鼠标在该文本区域内停止滚动，鼠标离开时恢复滚动
    实例：只需在原有js代码添加以下内容
    js:
    area.onmouseover=function(){
        clearInterval(time)
    }
    area.onmouseout=function(){
        time = setInterval("scrollUp()",500)
    }

间歇性无缝滚动

用js实现滚动内容的停顿,当然也可以用marquee

单次滚动
    只让其滚动一条内容,便自动停止滚动
    通过对卷去的高度取模(%)的办法来实现是否达到位置
js:
    //每条内容的高度，即滚动在什么位置停止
    var iLiHeight = 24
    //完善函数
    function scrollUp(){
        area.srollTop+=speed
        //判断是否达到位置
        if(area.scrollTop%iLiHeight==0){
            clearInterval(time)
        }
    }
    time = setInterval("scrollUp()",500)

间歇性循环滚动
    带有循环的单次滚动,使setInterval与setTimeout在函数中来回嵌套。
    setTimeout:控制间隔时间  setInterval:控制速度
js:
    function scrollUp(){
    area.srollTop+=speed
    if(area.scrollTop%iLiHeight==0){
        clearInterval(time)
        setTimeout("startMove()",2000)
        }
    }
    function startMove(){
        if(area.scrollTop==con1.offsetHeight){
            area.scrollTop=0
        }
        time=setInterval("scrollUp",50)
    }

知识点复习

    setTimeout(表达式,延迟时间)
        在执行时，是在载入延迟指定时间之后,去执行一次表达式。
    setInterval(表达式,交互时间)
        在执行时，它从载入后,每隔指定时间便执行一次表达式