css 上下滚动效果

最新推荐文章于 2024-05-11 11:24:23 发布

donggu1772

最新推荐文章于 2024-05-11 11:24:23 发布

阅读量504

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Nbge/p/6145546.html

版权

<html>
<head>
<style>
.scroll{
	overflow:hidden;
	width:100%;
}
.scrollout{
  height:250px;
  width:100%;
  overflow:hidden;
  cursor:pointer;
  }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
 //无缝滚动
	var rclone=$("#rscroll").html();//这里要用html而不能用clone,html()方法是获取html代码，你是要加长html代码，clone方法是要复制节点信息
	$("#rscrollout").append(rclone);//其次，你滚动的内容长度要大于200+scrollTop的高度才能进行滚动
	var lclone=$("#lscroll").html();
	$("#lscrollout").append(lclone);
	var speed=1;
	var NY=window.setInterval(scroll2,100);
	function scroll2(){
		var scrollTop=$(".scrollout").scrollTop()+speed;
		if(scrollTop==400){
			scrollTop=0;
 		}
		$(".scrollout").scrollTop(scrollTop);
	}

	$(".scrollout").hover(function(){clearInterval(NY)},function(){NY=setInterval(scroll2,100);});

</script>
</head>
<body>
<div class="scrollout" id="rscrollout">
				<div id="rscroll" class="scroll" style="height:400px;">
				
					<ul>
						<li>1</li>
						<li>11</li>
						<li>111</li>
						<li>1111</li>
						<li>11111</li>
						<li>111111</li>
						<li>1111111</li>
						<li>11111111</li>
						<li>111111111</li>
						<li>1111111111</li>
						<li>11111111111</li>
						<li>111111111111</li>
						<li>1111111111111</li>
						<li>11111111111111</li>
						<li>111111111111111</li>
						
					</ul>
				</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/Nbge/p/6145546.html

donggu1772

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 上下滚动效果

<html><head><style>.scroll{ overflow:hidden; width:100%;}.scrollout{ height:250px; width:100%; overflow:hidden; cursor:pointer; }</style>...
复制链接

扫一扫