JS代码实现带翻页效果的公告栏

2012/10/18 10:51:46作者：佚名来源：网络

移动端

【实例名称】

JS代码实现带翻页效果的公告栏

【实例描述】

公告栏通常需要marquee实现滚动效果，有时候因为页面的排版问题，町能需要翻页形式的公告栏。本例就学习如何实现这种功能。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#divMsg{
line-height:20px;
height:20px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var Scroll = new function(){
    this.delay   = 2000;    //延迟的时间
    this.height  = 20;      //行的高度
    this.step    = 4;       //步长
    this.curHeight= 0;
    this.stimer  = null;
    this.timer   = null; 
    this.start   = function(){                  //开始翻页-调用move方法
        this.move();
    }
    this.move  = function(){
        var self = this;
        if(this.curHeight == this.height)       //如果显示完一行
        {
            this.timer = setTimeout(function(){ //使用定时器-定时下一行的翻页时间
            self.move();
        }, this.delay);
        this.curHeight = 0;
        if(this.element.scrollTop >= this.element.scrollHeight - this.height){ //滚动信息已经完毕
        this.element.scrollTop = 0;
        }
        return true;
        }
        this.element.scrollTop += this.step;
        this.curHeight += this.step;
        this.timer = setTimeout(function(){   //设置自动翻页定时器
        self.move();
        }, 30);
    }
    this.stop = function(){        //清除定时期，停止滚动翻页
        clearTimeout(this.timer);
    }
}
</script>
</head>
<body>
<div id="divMsg">
    张三奥运会历史性的突破，拿到了男子100米金牌<br/>
    奥运会历史上的首位8金得主<br/>
    北京奥运会欢迎志愿者的参与<br/>
    奥运会带来了什么样的商机<br/>
    北京奥运会2008年举行<br/>
    娱乐新闻请转到娱乐主页<br/>
    今天又获得一枚金牌<br/>
</div><script type="text/javascript">
Scroll.element = document.getElementById('divMsg');
Scroll.start();
</script>
<input type="button" value="开始" onclick="Scroll.start()"/>
<input type="button" value="停止" onclick="Scroll.stop()"/>
</body>
</html>

【运行效果】

翻页效果

【难点剖析】

本例的重点是显示信息高度的判断。代码中默认每行的高度为20，如果当前行的高度已经超过20，则调用定时器，根据指定的时间再显示下一行的信息。

【源码下载】

本实例JS代码下载

标签： JS代码翻页效果

热门软件/ 推荐游戏/ 手机软件

JS代码实现带翻页效果的公告栏

资讯分类

推荐教程

精品软件推荐