JS实现的新闻列表自动滚动效果示例

本文实例讲述了JS实现的新闻列表自动滚动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

#box{width:260px;height:100px;margin:0 auto;border:2px solid red;overflow: hidden}

ul{padding:0;margin:0;list-style: none;overflow: hidden}

ul li{height:24px;line-height: 24px;padding-left:10px;}

a{text-decoration: none;color:#000;}

a:hover{color:#f00}

</style>

</head>

<body>

<div id="box">

<ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1,课程html</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2,课程css</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3,课程js</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4,课程jquery</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5,课程html5</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6,课程css3</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >7,课程hp</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >8,课程bpootstrap</a> </li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >9,课程apicloud</a> </li>

</ul>

<ul id="con2"></ul>

</div>

</body>

<script type="text/javascript">

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

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

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

var s=document.getElementsByTagName("a");

var speed=50;

con2.innerHTML=con1.innerHTML;

function ScrollUp(){

if( box.scrollTop>=con1.scrollHeight){

box.scrollTop=0;

}else

box.scrollTop++;

}

var i=setInterval("ScrollUp()",speed);

function Stop(){

clearInterval(i);

}

function Up(){

i=setInterval("ScrollUp()",speed);

}

</script>

</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是 JS实现的新闻列表自动滚动效果示例 的全部内容, 来源链接: utcz.com/z/323942.html

回到顶部