像APP里这样的新闻公告,新闻标题会间断地向上滚动,我看过MUI手册,好像只有图片轮播插件,请问这样的该怎么弄?自己写JQUERY?
这是一条飞猪
- 发布:2015-12-03 10:23
- 更新:2019-06-28 11:33
- 阅读:8788
<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;
}
这是我的代码,我也是从网上找然后用自己改的