Live2D 看板娘

运用JavaScript技术，掌握无缝滚动和歇间性滚动的制作方法。

一、marquee标签实现信息滚动

　　1 behavior滚动的方式

　　　　alternate：表示在两端之间来回滚动

　　　　scroll：表示由一段滚动到另一端，会重复

　　　　slide：表示由一端滚动到另一端，不会重复

　　2 direction滚动的方向down、up、left、right

　　3 loop滚动的次数（当loop=-1表示一直滚动下去，默认为-1）

　　4 scrollamount设定活动字幕的滚动速度

　　5 scrolldelay设定活动字幕滚动两次之间的延迟时间

　　备注：marquee可以实现文字的简单滚动

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML文字滚动效果</title>
<style>
*{
    margin:0;
    padding:0;
}
.box{
    width:500px;
    border:3px solid #ccc;
    margin:50px auto 0;
    padding:10px;
}
dl,dt{
    list-style:none;
}
dl dt{
    line-height:24px;
    font-size:16px;
    font-weight:bold;
    color:#000;
 }
</style>
</head>

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

</div>
</body>
</html>

二、无缝滚动制作

　　知识点：

　　1 innerHTML

　　2 scrollTop

　　3 offsetHeight

　　4 setInterval()

　　5 clearInterval()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>向上无缝滚动</title>
    <style>
    body {
        font-size: 12px;
        line-height: 24px;
        text-algin: center;
        /* 页面内容居中 */
    }
    
    * {
        margin: 0px;
        padding: 0px;
        /*  去掉所有标签的marign和padding的值  */
    }
    
    ul {
        list-style: none;
        /*  去掉ul标签默认的点样式  */
    }
    
    a img {
        border: none;
        /*  超链接下，图片的边框  */
    }
    
    a {
        color: #333;
        text-decoration: none;
        /* 超链接样式 */
    }
    
    a:hover {
        color: #ff0000;
    }
    
    #mooc {
        width: 399px;
        border: 5px solid #ababab;
        -moz-border-radius: 15px;
        /* Gecko browsers */
        -webkit-border-radius: 15px;
        /* Webkit browsers */
        border-radius: 15px;
        box-shadow: 2px 2px 10px #ababab;
        margin: 50px auto 0;
        text-align: left;
        /* 让新闻内容靠左 */
    }
    /*  头部样式 */
    
    #moocTitle {
        height: 62px;
        overflow: hidden;
        /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
        font-size: 26px;
        line-height: 62px;
        padding-left: 30px;
        background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
        /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
        /* Saf4+, Chrome */
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
        /* IE*/
        border: 1px solid ##f05e6f;
        -moz-border-radius: 8px 8px 0 0;
        /* Gecko browsers */
        -webkit-border-radius: 8px 8px 0 0;
        /* Webkit browsers */
        border-radius: 8px 8px 0 0;
        color: #fff;
        position: relative;
    }
    
    #moocTitle a {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: inline;
        color: #fff;
        font-size: 12px;
        line-height: 24px;
    }
    /*  底部样式 */
    
    #moocBot {
        width: 399px;
        height: 10px;
        overflow: hidden;
        /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
    }
    /*  中间样式 */
    
    #moocBox {
        height: 144px;
        width: 335px;
        margin-left: 25px;
        margin-top: 10px;
        overflow: hidden;
        /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
    }
    
    #mooc ul li {
        height: 24px;
    }
    
    #mooc ul li a {
        width: 180px;
        float: left;
        display: block;
        overflow: hidden;
        text-indent: 15px;
        height: 24px;
    }
    
    #mooc ul li span {
        float: right;
        color: #999;
    }
    </style>
</head>

<body>
    <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>
    <script type="text/javascript">
    var area = document.getElementById('moocBox');
    var con1 = document.getElementById('con1');
    var 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);
    }
    </script>
</body>

</html>
View Code

三、间歇性无缝滚动

重点：使用setInterval()和setTimeout()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新闻无缝向上无缝滚动</title>
    <style>
    body {
        font-size: 12px;
        line-height: 24px;
        text-algin: center;
        /* 页面内容居中 */
    }
    
    * {
        margin: 0px;
        padding: 0px;
        /*  去掉所有标签的marign和padding的值  */
    }
    
    ul {
        list-style: none;
        /*  去掉ul标签默认的点样式  */
    }
    
    a img {
        border: none;
        /*  超链接下，图片的边框  */
    }
    
    a {
        color: #333;
        text-decoration: none;
        /* 超链接样式 */
    }
    
    a:hover {
        color: #ff0000;
    }
    
    #mooc {
        width: 399px;
        border: 5px solid #ababab;
        -moz-border-radius: 15px;
        /* Gecko browsers */
        -webkit-border-radius: 15px;
        /* Webkit browsers */
        border-radius: 15px;
        box-shadow: 2px 2px 10px #ababab;
        margin: 50px auto 0;
        text-align: left;
        /* 让新闻内容靠左 */
    }
    /*  头部样式 */
    
    #moocTitle {
        height: 62px;
        overflow: hidden;
        /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
        font-size: 26px;
        line-height: 62px;
        padding-left: 30px;
        background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
        /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
        /* Saf4+, Chrome */
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
        /* IE*/
        border: 1px solid ##f05e6f;
        -moz-border-radius: 8px 8px 0 0;
        /* Gecko browsers */
        -webkit-border-radius: 8px 8px 0 0;
        /* Webkit browsers */
        border-radius: 8px 8px 0 0;
        color: #fff;
        position: relative;
    }
    
    #moocTitle a {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: inline;
        color: #fff;
        font-size: 12px;
        line-height: 24px;
    }
    /*  底部样式 */
    
    #moocBot {
        width: 399px;
        height: 10px;
        overflow: hidden;
        /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
    }
    /*  中间样式 */
    
    #moocBox {
        height: 144px;
        width: 335px;
        margin-left: 25px;
        margin-top: 10px;
        overflow: hidden;
        /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
    }
    
    #mooc ul li {
        height: 24px;
    }
    
    #mooc ul li a {
        width: 180px;
        float: left;
        display: block;
        overflow: hidden;
        text-indent: 15px;
        height: 24px;
    }
    
    #mooc ul li span {
        float: right;
        color: #999;
    }
    </style>
</head>

<body>
    <div id="mooc">
        <div id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </div>
        <div id="moocBox">
            <ul>
                <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>
        </div>
        <div id="moocBot"> </div>
    </div>
    <script type="text/javascript">
    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)
    </script>
</body>

</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiangtengteng/p/5396529.html