文字横向流动展示

最新推荐文章于 2019-08-21 17:35:00 发布

一念花开丶君临天下

最新推荐文章于 2019-08-21 17:35:00 发布

阅读量752

点赞数 1

本文链接：https://blog.csdn.net/qq_43431024/article/details/87690436

版权

html布局就是需要两个一样的ul

  	uls.innerHTML+=uls.innerHTML;//复制元素本身追加到后面

css设置元素基本宽度

position: absolute;//定位

设置一个定时器

setInterval(function(){ }, 10);
overflow: hidden;//元素超出部分自动隐藏

定时器中操作left一直减小，判断到宽度的一半时让容器重置left

跟无缝滚动原理有些相似

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <style>
   	*{
   		padding: 0px;
   		margin: 0px;
   	}
   	#wai{
   		height: 50px; 
   		border: 1px solid red; 
   		position: relative;
   		overflow: hidden;
   	}
   	#uls{
   		list-style:none;
   		width: 1380px; 
   		height:50px;
   		line-height: 50px; 
   		border: 1px solid aquamarine; 
   		position: absolute; 
   		left:0px;
   	}
   	ul>li{
   		display: inline-block;
   		margin: 0 5px;
   		width: 100px;
   	}
   </style>
   <body>
  <div id="wai">
   		<ul id="uls">
   			<li>1111111</li>
   			<li>2222222</li>
   			<li>3333333</li>
   			<li>4444444</li>
   			<li>5555555</li>
   			<li>6666666</li>
   		</ul>
   	</div>
   </div>
   </body>
   <script src="js/jquery.min.js"></script>
   <script type="text/javascript">
   	var i=0; 
   	var uls=document.getElementById('uls');
   	uls.innerHTML+=uls.innerHTML;
   	var kuan=parseInt(uls.style.width);
   	$('#wai').css("width",kuan/2+"px");
   			setInterval(function(){ 
   			$('#uls').css("left",-i+"px");
   			if(i<kuan/2){
   				i++;
		   	}else{
		   		i=0;	
		   	}
   		}, 10);
   </script>
</html>

一念花开丶君临天下

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字横向流动展示

html布局就是需要两个一样的ul uls.innerHTML+=uls.innerHTML;//复制元素本身追加到后面css设置元素基本宽度position: absolute;//定位设置一个定时器setInterval(function(){ }, 10);overflow: hidden;//元素超出部分自动隐藏定时器中操作left一直减小，判断到宽度的一半时让容...
复制链接

扫一扫