js实现的新闻列表垂直滚动实现详解

来源:互联网 时间:1970-01-01

js实现的新闻列表垂直滚动实现详解:
新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更为美观一些,下面就通过代码实例详细介绍一下如何实现此效果。
代码如下:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

body

{

margin:0px;

padding:0px;

}

#express li

{

height:25px;

border-bottom:dashed 1px #999;

line-height:20px;

font-size:12px;

list-style:none;

}

#demo

{

height:255px;

overflow:hidden;

margin-top:0px;

}

#book_class

{

width:200px;

height:260px;

border:3px solid #999;

margin-left:auto;

margin-right:auto;

margin-top:70px;

border-radius:5px 5px 5px 5px;

box-shadow:0px 0px 10px 10px #CECED1;

}

#express

{

margin-left:-30px;

margin-right:10px;

margin-bottom:0px;

margin-top:0px;

}

#book_class div div ul li a

{

text-decoration:none;

color:#333333;

}

#book_class div div ul li a:hover {text-decoration:underline;}

</style>

<script type="text/javascript">

var speed=50;

var timer=null;

window.onload=function()

{

var demo=document.getElementById("demo");

var demo1=document.getElementById("demo1");

var demo2=document.getElementById("demo2");

demo2.innerHTML=demo1.innerHTML;

function moveTop()

{

if(demo1.offsetHeight-demo.scrollTop<=0)

{

demo.scrollTop=0;

}

else

{

demo.scrollTop++;

}

}

timer=setInterval(moveTop,speed);

demo.onmouseover=function(){clearInterval(timer);}

demo.onmouseout=function(){timer=setInterval(moveTop,speed);}

}

</script>

</head>

<body>

<div id="book_class">

<div id="demo">

<div id="demo1">

<ul id="express">

<li><a href="#">·蚂蚁部落欢迎您...</a></li>

<li><a href="#">·努力奋斗才会有美好的明天...</a></li>

<li><a href="#">·没有人一开始就是高手...</a></li>

<li><a href="#">·分享和互助神是进步动力...</a></li>

<li><a href="#">·每一天都是新的,把握现在...</a></li>

<li><a href="#">·太阳出来了,好好享受生活...</a></li>

<li><a href="#">·新的一年里在各年都有进步...</a></li>

<li><a href="#">·网站的进步离不开大家的支持</a></li>

<li><a href="#">·人人都有可贵之处,在于发现</a></li>

<li><a href="#">·则是新闻的最后一条</a></li>

</ul>

</div>

<div id="demo2"></div>

</div>

</div>

</body>

</html>

 

以上代码实现了我们的要求,新闻列表可以不间断垂直滚动效果,下面介绍一下它的实现过程。
一.代码注释:
1.var

speed=50,设置新闻列表的滚动速度,数字越大滚动越慢。
2.var

timer=null,声明一个变量并赋值null,此变量为了存储定时器函数setInterva()函数的返回值。
3.window.onload=function(){},当稳当内容完全加载完毕再去执行函数中的代码。
4.var

demo=document.getElementById("demo"),获取具有指定id属性值的元素对象。
5.demo2.innerHTML=demo1.innerHTML,将demo1的内容赋值一份到demo2元素,之所以这样就是为了当新闻列表滚动的时候,能够出现首尾相接连续效果,否则后面会一片空白现象。
6.function moveTop(){},此函数是滚动效果的核心。
7.if(demo1.offsetHeight-demo.scrollTop<=0),判断向上滚动的尺寸是否达到新闻列表的高度,也就是第一个新闻列表是否向上完全滚动完毕。
8.demo.scrollTop=0,将demo元素的scrollTop的属性值设置为0,也就是重新开始滚动。
9.demo.scrollTop++,如果没有到达滚动指定尺寸,则继续向上滚动。
10.timer=setInterval(moveTop,speed),使用定时器函数,每隔50毫秒执行一次函数moveTop。
11.demo.onmouseover=function(){clearInterval(timer);},当鼠标demo元素上的时候停止滚动。
12.demo.onmouseout=function(){timer=setInterval(moveTop,speed);}

,鼠标离开的时候继续滚动。
二.相关阅读:
1.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
2.offsetHeight属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。


3.setInterval()函数可以参阅window对象的setInterval()方法一章节。
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。


5.onmouseover事件可以参阅javascript的onmouseover事件的定义和用法。


6.onmouseout事件可以参阅javascript的onmouseout事件详解一章节。  

 


相关阅读:
Top