JavaScript实现新闻上下滚动

最新推荐文章于 2024-05-04 01:51:35 发布

doudou_demo

最新推荐文章于 2024-05-04 01:51:35 发布

阅读量6.5k

点赞数 1

分类专栏： html+css 文章标签： javascript HTML

本文链接：https://blog.csdn.net/doudou_demo/article/details/47948337

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<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>

doudou_demo

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现新闻上下滚动

原理：其实就是通过滚动条的不停滚动来实现的效果（复制即用）<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><
复制链接

扫一扫