W3C废弃marquee ,使用原生js实现无限滚动

最新推荐文章于 2023-01-11 14:54:59 发布

转载最新推荐文章于 2023-01-11 14:54:59 发布 · 208 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Ychao/p/7573253.html

标签

#javascript #ViewUI

本文介绍了一个使用HTML、CSS和JavaScript实现的无缝滚动效果。通过复制第一个ul列表到第二个ul，并在滚动超过第一个ul高度时，将滚动位置复位，从而达到无缝滚动的效果。文章包含了完整的代码示例。

<!DOCTYPE HTML>
<html>
<!-- 自主学习 来自慕客网 vivian老师的视频教学   连接 http://www.imooc.com/learn/17 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<head>
<style type="text/css">
ul{
	/*不要margin否则滚动 会有缝隙*/
	margin:0;
}
  
 div {
 	/*overflow hidden·否则无法盖住下面的内容*/
 	overflow: hidden;
    width: 75px;
    height: 100px;
    margin-left: 29%;
    margin-top: 10%;
    background: aqua;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无缝滚动</title>

</head>
<body>
<div id="ca">
<ul id="c1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>

</ul>
<ul id="c2"></ul>
</div>
</body>
<script language="javascript" type="text/javascript">
var c1=document.getElementById("c1");
	var c2=document.getElementById("c2");
	   var ca=document.getElementById("ca");
	   /*将第一个ul的值赋值给第二个  当第一个头部消失时 由第二个来显示*/
	   	c2.innerHTML=c1.innerHTML;	
	   	var cas=null;
window.onload=function(){
  st(); 
}
 cas=setInterval('st()',50);
function st(){
	//clearInterval(cas);
	/*如果滚动长度大于第一个ul的高度  就需要将第一个ul回到原处 */
   if(ca.scrollTop>=c1.offsetHeight){
   ca.scrollTop=0;
  }else{
  	   ca.scrollTop++;
  }
/*鼠标移入就清除清除定时器*/
  ca.onmouseover=function() {
  	clearInterval(cas);
  }
	ca.onmouseout=function() {
		cas=setInterval('st()',50);
	}

}



  

</script>
</html>

转载于:https://www.cnblogs.com/Ychao/p/7573253.html