上下滚动新闻

最新推荐文章于 2025-02-07 18:33:37 发布

原创最新推荐文章于 2025-02-07 18:33:37 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#公告 #jQuery #CSS #HTML #ViewUI

DOM 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了两种网页内容滚动效果的实现方法：连续滚动与单步滚动。连续滚动通过修改容器的scrollTop属性使内容平滑滚动；单步滚动则通过DOM操作逐个显示列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]连续滚动:[/b]该方法要求内容(contentDiv)的高度应该大于其容器(demo)的高度,然后复制一份内容，通过不断修改容器的scrollTop，来使得可见内容变化。(基本代码来自网上)


<div id="demo">
<div class="scroll" id="scroll"></div>

<div id="contentDiv">
<ul>
    <li><a href="" title="三列自适应宽度液态布局">三列自适应宽度液态布局</a></li>
    <li><a href="" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
    <li><a href="" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
    <li><a href="" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
    <li><a href="" title="图片在已知容器中的垂直和水平居中问题">图片在已知容器中的垂直和水平居中问题 </a></li>
</ul>
</div>
<div id="cpDiv"></div>
</div>


#demo a{background:#FFF; color:#333;}
#demo a:hover{background:#FFF;color: #C00;}
#demo ul{text-align: left; }
#demo li a{
	padding-left:1.5em;
	background-color: #F7F7F7;
	display: block;
	margin-bottom: 1px;}
#demo li {
}
#cpDiv{
	background-color:pink;
}
#demo{
	overflow:hidden;
	width: 390px;
	height: 100px;
	background-color:#666;
	margin: 5px;
}


    var speed=40;
    var demo = document.getElementById('demo');
    var contentDiv = document.getElementById('contentDiv');
    var cpDiv = document.getElementById('cpDiv');

    cpDiv.innerHTML = contentDiv.innerHTML
    function Marquee1() {
      if (cpDiv.offsetHeight <= demo.scrollTop)
          demo.scrollTop -= contentDiv.offsetHeight
      else {
          demo.scrollTop++
      }

    }
    var MyMar1 = setInterval(Marquee1, speed)
    demo.onmouseover = function() {
        clearInterval(MyMar1)
    }
    demo.onmouseout = function() {
        MyMar1 = setInterval(Marquee1, speed)
    }

[b]单步滚动：[/b]通过不断的将第一个节点移动到最后一个节点来实现


<div id="scrollDiv">
  <ul>
    <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>


#scrollDiv ul{
	margin-top:0px;
	display:block;
	list-style-type:none;
}
#scrollDiv li{

	line-height :1.2em;
	font-family:宋体;
	font-size:90%;
	padding-top:0.3em;
	list-style-type:disc;
}
#scrollDiv li a{
	text-decoration:none;
}
#scrollDiv li a:hover{
	text-decoration:underline;
	color:#ff0000;
}
#scrollDiv{
	width:200px;
	/*
	  最好设置为上面 li的line-height 与padding的公倍数.
	  从而可以避免滚动的时候条目因为高度问题而部分被遮盖。*/
	height:12em;
	border:1px solid #000;	
	background-color:#ccc;
	overflow:hidden
}


//简单的滚动
function doScrollSimple(){
    var divs = document.getElementById('scrollDiv');
    var uls = divs.getElementsByTagName('ul');
    var li = uls[0].getElementsByTagName('li');
    uls[0].appendChild(li[0]);
}
//利用JQuery，稍微带了一点儿动画
function doScrollAnimate(){

	var el = $('#scrollDiv').find("ul:first");
        el.animate({
	    //每次滚动的大小,大约为li元素占据的高度 
            marginTop: "-1.5em"
        },'noraml',function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}