课程咨询 :0551-64632511 QQ:2146233496

合肥web前端培训

合肥web培训 > 达内新闻 > 巧用:marquee&js的信息滚动
  • 巧用:marquee&js的信息滚动

    发布:合肥web培训      来源:达内新闻      时间:2016-05-25

  • 合肥达内web培训专家重点介绍一下:marquee标签和js代码实现信息滚动的方法。(注:HTML5废弃了:marquee标签,改为CSS 3实现信息滚动,不过原理是相似的)

    一、marquee标签信息滚动

    语法:<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 信息滚动

    1、文字信息无缝滚动

    无缝滚动原理

    不需使用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(){
            //如果已经滚玩了一个内容的高度,则改变它的scrollUp
            if(area.scrollUp==con1.offsetHeight){
                area.srollUp=0
            }
            area.scrollUp+=speed
        }
        time = setInterval("scrollUp()",500)

    鼠标悬停事件

    当鼠标在该文本区域内停止滚动,鼠标离开时恢复滚动

    实例:只需在原有js代码添加以下内容

        js:
        area.onmouseover=function(){
            clearInterval(time)
        }
        area.onmouseout=function(){
            time = setInterval("scrollUp()",500)
        }

    2、间歇性无缝滚动

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

    单次滚动

    只让其滚动一条内容,便自动停止滚动,通过对卷去的高度取模(%)的办法来实现是否达到位置。

    js:
        //每条内容的高度,即滚动在什么位置停止
        var iLiHeight = 24px;
        //完善函数
        function scrollUp(){
            area.srollUp+=speed
            //判断是否达到位置
            if(area.scrollUp%iLiHeight==0){
                clearInterval(time)
            }
        }
        time = setInterval("scrollUp()",500)

    间歇性循环滚动

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

    推荐文章

上一篇:浅析::after,::before伪元素制作动画效果

下一篇:jQuery基础之选择器

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56