之前整理过一篇类似的无缝滚动的插件《js实现无缝滚动》和《仿拼多多拼单 向上无缝滚动》,都是类似的效果,列表无缝向上滚动,今天再记录一个笔记,觉得这个更适合纯文字列表的无缝滚动情况,例如:政府机构的滚动新闻列表,培训机构的考试时间列表... 废话不多逼叨,直接看效果,上代码!

css代码:

.scrollUp{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
#scrolList{height:auto; text-align:left;}
#scrolBlack{height:auto; text-align:left;}
#scrolList li,#scrolBlack li{list-style-type:none; height:22px; text-align:left; }

html代码:

<div class="scrollUp">
<ul id="scrolList">
    <li><a href="#" target="_blank">wp/wordpress自定义小工具logo调用设置</a></li>
    <li><a href="#" target="_blank">wp/wordpress给文章图片自动添加alt和title信息</a></li>
    <li><a href="#" target="_blank">wp/wordpress新增文章点赞功能</a></li>
    <li><a href="#" target="_blank">wp/wordpress网站数据统计调用大全</a></li>
    <li><a href="#" target="_blank">Qui-Pure主题版本更新日志 </a></li>
    <li><a href="#" target="_blank">wp/wordpress去掉head文件不必要的引用</a></li>
    <li><a href="#" target="_blank">wp/wordpress文章页的上一篇/下一篇功能</a></li>
</ul>
<ul id="scrolBlack"></ul>
</div>

js代码:

var speed = 80;//速度越大,滚动越慢
window.onload=function(){
    var s_box=document.getElementsByClassName("scrollUp")[0];
    var s_list=document.getElementById("scrolList");
    var s_blank=document.getElementById("scrolBlack");
    s_blank.innerHTML = s_list.innerHTML;
    function Marquee(){
        if(s_box.scrollTop>=s_list.offsetHeight){
           s_box.scrollTop=0;
        }else{
           s_box.scrollTop=s_box.scrollTop+1;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    s_box.onmouseover=function(){clearInterval(MyMar)};
    s_box.onmouseout=function(){MyMar=setInterval(Marquee,speed); };
}

使用比较简单,懂点前端基础都会用,不啰嗦了,拿去耍吧,记得把ul,li的初始样式去掉!

最后,推广一下我自己开发的wp主题:Qui-Pure,同时也在用,就是当前你看到的UI主题界面,主题永久免费,顶部菜单就可以下载!