您的位置：首页 > Web前端 > JavaScript

JavaScript实现新闻上下滚动

2015-08-24 11:15 561 查看

原理：其实就是通过滚动条的不停滚动来实现的效果（复制即用）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<style type="text/css">
*{
padding:0;
margin:0;
border:none;
}
#news{
width:300px;
height:100px;
margin:20px auto;
background-color:#CCC;
border:#039 solid 1px;
overflow:hidden;/*这里必须设置哦，否则滚动会消失的，如果设置为scroll，更容易明白原理*/
}
#news li{
line-height:30px;
}
</style>
</head>
<body>
<div id="news" onmouseover="tz()" onmouseout="ks()">
<ul id="p1">
<li><a href="">1这是测试新闻滚动效果</a></li>
<li><a href="">2这是测试新闻滚动效果</a></li>
<li><a href="">3这是测试新闻滚动效果</a></li>
<li><a href="">4这是测试新闻滚动效果</a></li>
<li><a href="">5这是测试新闻滚动效果</a></li>
<li><a href="">6这是测试新闻滚动效果</a></li>
<li><a href="">7这是测试新闻滚动效果</a></li>
<li><a href="">8这是测试新闻滚动效果</a></li>
</ul>
<ul id="p2">
</ul>
</div>
<script type="text/javascript">
var n=document.getElementById("news");
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p2.innerHTML=p1.innerHTML;
//alert(n.offsetHeight+" 1  "+p1.offsetHeight);
var f=function(){
n.scrollTop++;
if(n.scrollTop>=p1.offsetHeight){
//alert(n.scrollTop+" 1  "+p1.offsetHeight);
n.scrollTop=0;
}
}
var i=setInterval(f,20);
var tz=function(){
clearInterval(i);
}
var ks=function(){
i=setInterval(f,20);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航