基于jQuery的公告无限循环滚动实现代码

基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。

写一个简单的小demo：

	
		
		
		
		
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			body {
				line-height: 1.5;
				font-size: 14px;
			}
			
			.scroll {
				display: inline-block;
				overflow: hidden;
				position: relative;
				height: 50px;
			}
			
			.scroll ul {
				transform: translateY(0);
			}
			
			.animate {
				-webkit-transition: all .3s ease-out;
			}
			
			.scroll li {
				overflow: hidden;
				display: -webkit-box;
				margin-left: 10px;
				width: 90%;
				height: 50px;
				line-height: 30px;
				color: #333;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				white-space: normal;
			}
			
			.scroll li  img{
				margin-top: 20px;
				margin-right: 12px;
				width: 12px;
				height: 12px;
				
			}
		

	

	
		
			

				
前端妹子是我吗
				
对呀，我就是前端妹子啊
				
哈哈哈你是谁呀
				
你猜猜我是哪个
			
		
	
	
	
	

热门推荐：全栈工程师开发常用插件、工具类库，视频，资料300G资源汇总