信息滚动效果制作

Marquee标签实现信息滚动

html标签<marquee>可以实现多种滚动效果，无需js控制。

使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：<marquee>...</marquee>；
说明：在标记之间添加要进行滚动的内容。

重要属性：

1. 滚动方向direction（包括4个值：up、 down、 left和 right）
   　语法：<marquee direction="滚动方向">...</marquee>
2. 滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
   　语法：<marquee behavior="滚动方式">...</marquee>
3. 滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
   语法：<marquee scrollamount="5">...</marquee>
4. 滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
   　语法：<marquee scrolldelay="100">...</marquee>
5. 滚动循环loop（默认值是-1，滚动会不断的循环下去）
   　　语法：<marquee loop="2">...</marquee>
6. 滚动范围width、height
7. 滚动背景颜色bgcolor
   8.空白空间hspace、vspace

   案例：

   <div class="box" style="width:500px;border:3px solid #ccc;margin:50px auto 0;padding:10px;">
       <dl style="list-style:none;">
         <dt style="list-style:none;">文字滚动示例（默认）：</dt>
         <dd><marquee>我默认向左滚。。。。。</marquee></dd>
       </dl>
       <dl style="list-style:none;">
         <dt style="list-style:none;">文字滚动示例（向右）：</dt>
         <dd><marquee direction="right" scrolldelay="500">我向右滚动。。。。</marquee></dd>
       </dl>
       <dl style="list-style:none;">
         <dt style="list-style:none;">文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：</dt>
         <dd><marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。</marquee></dd>
       </dl>
       <dl style="list-style:none;">
         <dt style="list-style:none;">文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：</dt>
         <dd><marquee direction="up"  bgcolor="#CCFF66" width="250" height="55">我在区域内滚动，向上哟。。。。</marquee></dd>
       </dl>
   </div>

展示效果：

文字滚动示例（默认）：

我默认向左滚。。。。。

文字滚动示例（向右）：

我向右滚动。。。。

文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：

我来回滚动。。。。

文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：

我在区域内滚动，向上哟。。。。

鼠标悬停效果（向上，背景色为#CCFF66，设置了背景宽度和高度）：

文字内容

文字无缝滚动

涉及知识点

• innerHTML
• scrollTop：被隐藏在内容区域上方的空间大小。此属性可改变元素的滚动位置。
• offsetHeight: 元素在垂直方向上占用的空间大小（元素height+水平滚动条高度+元素边框高度*2）；
• setInterval()
• clearInterval()

无缝滚动原理

案例

<div  id="mooc"> 
<!--  头部 -->
    <h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
    <!--  头部结束 --> 
    <!--  中间 -->
    <div  id="moocBox">
        <ul id="con1">
            <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
            <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
            <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
            <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
            <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
            <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
            <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
            <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
            <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
        </ul>
        <ul id="con2">
        </ul>
    </div>
<!--  中间结束 --> 
</div>

省略

window.onload=function(){
    var area=document.getElementById('moocBox'),
        con1=document.getElementById('con1'),
        con2=document.getElementById('con2');
    var speed = 50;
    area.scrollTop=0;
    con2.innerHTML = con1.innerHTML;
    function scrollUp(){
        if(area.scrollTop>=con1.scrollHeight){
            area.scrollTop = 0;
        }else{
            area.scrollTop++;
        }
    }
    var myScroll = setInterval(scrollUp,speed);
    area.onmouseover = function(){
        clearInterval(myScroll);
    }
    area.onmouseout = function(){
        myScroll = setInterval(scrollUp,speed);
    }
}

查看Demo

间歇性无缝滚动

间歇性无缝滚动原理

案例

HTML及CSS代码和上面的案例几乎一样，故省略

window.onload=function(){
    var area = document.getElementById('moocBox');
     var iliHeight = 24;//单行滚动的高度
     var speed = 50;//滚动的速度
     var time;
     var delay= 2000;
     area.scrollTop=0;
     area.innerHTML+=area.innerHTML;//克隆一份一样的内容
     function startScroll(){
         time=setInterval(scrollUp,speed);
         area.scrollTop++;
         }
     function scrollUp(){
         if(area.scrollTop % iliHeight==0){
             clearInterval(time);
             setTimeout(startScroll,delay);
             }else{
                 area.scrollTop++;
                 if(area.scrollTop >= area.scrollHeight/2){
                     area.scrollTop =0;
                     }
                 }
         }
     setTimeout(startScroll,delay); //初始化
}

查看Demo

参考资源：

1. marquee文字滚动代码示例
2. 信息滚动效果制作