这是一条飞猪
这是一条飞猪
  • 发布:2015-12-03 10:23
  • 更新:2019-06-28 11:33
  • 阅读:8570

MUI能否做这样的新闻滚动效果?

分类:MUI
mui

像APP里这样的新闻公告,新闻标题会间断地向上滚动,我看过MUI手册,好像只有图片轮播插件,请问这样的该怎么弄?自己写JQUERY?

2015-12-03 10:23 负责人:无 分享
已邀请:
蔡繁荣

蔡繁荣 - 发表是最好的记忆

弄月

弄月

<dl class="news">  
				<dd class="title separator-right">  
					<a href="articles.html" data-extras='{"eid": "8", "etitle": "今日头条"}'>今日头条</a>  
				</dd>  
				<dd class="content">  
					<dl id="marqueebox0" class="marqueebox">  
					</dl>  
				</dd>  
			</dl>
function loadMarquee() {  
				mui.sendRequest(mui.constMap.ROOT_PATH + '/articles', {  
					filter: {  
						category_id: 8  
					},  
					pagination: {  
						page: 1,  
						count: 2  
					},  
					config: {  
						silence: true  
					}  
				}, function(result) {  
					if (!result.status.succeed) {  
						mui.toast(result.status.error_desc);  
						return;  
					}  
					var dl = document.getElementById("marqueebox0"),  
						fragment = document.createDocumentFragment();  
					mui.each(result.data, function(i, n) {  
						fragment.appendChild(fillArticlesDD(n));  
					});  
					dl.innerHTML = '';  
					dl.appendChild(fragment);  
					if (result.data.length > 0) {  
						/* startmarquee(一次滚动高度,速度,停留时间,图层标记); */  
						startmarquee(36, 50, 3000, 0);  
					}  
				});  
			}  
  
			function fillArticlesDD(n) {  
				var dd = document.createElement('dd'),  
					a = document.createElement('a');  
				a.setAttribute('href', 'article.html');  
				a.setAttribute('data-extras', JSON.stringify({eid: n.id}));  
				a.innerHTML = n.title;  
				dd.appendChild(a);  
				return dd;  
			}  
function startmarquee(lh, speed, delay, index) {  
				var t;  
				var p = false;  
				var o = document.getElementById("marqueebox" + index);  
				o.innerHTML += o.innerHTML;  
				o.onmouseover = function() {  
					p = true  
				}  
				o.onmouseout = function() {  
					p = false  
				}  
				o.scrollTop = 0;  
  
				function start() {  
					t = setInterval(scrolling, speed);  
					if (!p) o.scrollTop += 2;  
				}  
  
				function scrolling() {  
					if (o.scrollTop % lh != 0) {  
						o.scrollTop += 2;  
						if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;  
					} else {  
						clearInterval(t);  
						setTimeout(start, delay);  
					}  
				}  
				setTimeout(start, delay);  
			}
news {  
	margin-bottom: 10px;  
}  
.news .title{  
	display: inline-block;  
	text-align: left;  
	padding: 10px 5px 10px 15px;  
	width: 30%;  
	line-height: 24px;  
	font-size: 18px;  
	font-family: minijianhuali;  
}  
.news .title a,.news .title a:focus{  
	color: #ED0B3B;  
}  
.news .content{  
	width: 69%;  
	display: inline-block;  
	overflow: hidden;  
}  
.news .content .marqueebox{  
	width: 100%;  
	list-style: none;  
	overflow: hidden;  
	display: inline-block;  
	height: 24px;  
	line-height: 24px;  
	font-size: 14px;  
}  
.marqueebox dd{  
	padding: 5px 2px 5px 15px;  
}  
.marqueebox dd a{  
	width: 100%;  
	display: block;  
	overflow: hidden;  
	text-overflow: ellipsis;  
	white-space: nowrap;  
}  
.marqueebox dd a, .marqueebox a:focus{  
	color: #404040;  
}  

这是我的代码,我也是从网上找然后用自己改的

这是一条飞猪

这是一条飞猪 (作者)

非常感謝兩位的幫助

f***@yeah.net

f***@yeah.net

赞一个

该问题目前已经被锁定, 无法添加新回复