二、JavaScript语言--JS实践--信息滚动效果制作

运用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>

三、间歇性无缝滚动

重点：使用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>

二、JavaScript语言--JS实践--信息滚动效果制作的更多相关文章

二、JavaScript语言--JS实践--商城分类导航效果
商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...
二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
JS魔法堂：通过marquee标签实现信息滚动效果
一.前言有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
JavaScript js无间断滚动效果 scrollLeft方法使用模板
JavaScript js无间断滚动效果 scrollLeft方法使用模板 <!DOCTYPE HTML><html><head><meta charset ...
ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
二、JavaScript语言--JS基础--JavaScript入门篇
1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...
JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
jQuery实现的向下推送图文信息滚动效果
HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...

随机推荐

iOS开发——UI基础-UIImage，UIImageView的使用
1.UIImage 创建UIImage的两种方法 UIImage *image = [UIImage imageNamed:imageNmae]; UIImage *image = [UIImage ...
leetcode 74. Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
移动端rem切图
1.为什么用rem 根据屏幕大小,自动调整大小 2.如何使用rem 分以下几步 a.用ps把设置稿弄成640px或者750px的(记得等比例缩放) b.调试时记得把浏览器默认最小字体设置为最小.手机端 ...
好无语的问题----include 后面需要空格么？
前俩天回学校办事,在去师弟宿舍的时候,被问到了一个很 "深奥"得问题 ---------include 后面需要空格么? 在我以前的印象中不管在哪个编译器中,,都是需要有空格的, ...
细化如何安装LNMP + Zabbix 监控安装文档以及故障排除
1.LNMP所需安装包: 上传如下软件包到/soft目录中 mysql- (centos6. 64位自带)也可根据版本自行挑选,前提你了解这个版本 pcre-8.36.tar.gz nginx-.ta ...
单独使用CKfinder上传图片
首先引入ckfinder.js <script type="text/javascript" src="<%=request.getContextPath() ...
JQuery知识点链接
1.深入理解jQuery插件开发 http://learn.jquery.com/plugins/basic-plugin-creation/ 2.jQuer ...
jQuery之元素筛选
1.eq() 筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() ...
POJ 3009
http://poj.org/problem?id=3009 一个搜索的题目: 大意就是一个冰球,在冰面上滑动,你打击一次,就沿一个反向滑动,知道碰到墙就会停下,而墙则会破碎. 求从起点到终点的最短的 ...

二、JavaScript语言--JS实践--信息滚动效果制作

二、JavaScript语言--JS实践--信息滚动效果制作的更多相关文章

随机推荐

热门专题