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

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

赞一个

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