合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

巧用:marquee&js的信息滚动

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

合肥达内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基础之选择器

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省