网页中翻页式的公告版是如何实现的
日期：2014-05-16 浏览次数：20448 次
网页中翻页式的公告版是怎么实现的？
效果是一次只显示一条，显示下一条时有个向上翻页的效果
------解决方案--------------------
<!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>
<style type= "text/css ">
#test{
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(){
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= "test ">
中国推出Excel服务器 <br/>
40多位外教逼您说英语 <br/>
学3G!做软件特种兵!! <br/>
２００７靠教育赚钱！ <br/>
学网络拿高薪北大青鸟 <br/>
点击就送英语红宝书 <br/>
中国推出Excel服务器 <br/>
</div> <script type= "text/javascript ">
Scroll.element = document.getElementById( 'test ');
Scroll.start();
</script>
<input type= "button " value= "start " onclick= "Scroll.start() "/>
<input type= "button " value= "stop " onclick= "Scroll.stop() "/>
</body>
</html>
效果是一次只显示一条，显示下一条时有个向上翻页的效果
------解决方案--------------------
<!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>
<style type= "text/css ">
#test{
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(){
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= "test ">
中国推出Excel服务器 <br/>
40多位外教逼您说英语 <br/>
学3G!做软件特种兵!! <br/>
２００７靠教育赚钱！ <br/>
学网络拿高薪北大青鸟 <br/>
点击就送英语红宝书 <br/>
中国推出Excel服务器 <br/>
</div> <script type= "text/javascript ">
Scroll.element = document.getElementById( 'test ');
Scroll.start();
</script>
<input type= "button " value= "start " onclick= "Scroll.start() "/>
<input type= "button " value= "stop " onclick= "Scroll.stop() "/>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
