JS_模拟公告栏消息轮转（每行消息停留一段时间）

又是一篇以前的笔记。分享一下

 

此随笔主要记录：模拟公告栏消息轮转，每行消息停留一段时间，用JS实现。

主要的思路：对需要轮转的消息clone一份一模一样的，通过scrollTop与定时器进行实现，然后当scrollTop一旦等于所需轮转消息高度，scrollTop将再次设为0，重新轮转。

听起来好像很简单的样子，其实也很简单，哈哈哈~

贴上代码：

html:

<div  id="mooc"> 
<div  id="moocTitle">消息轮转<a href="#" target="_self">更多>></a> </div>
<div  id="moocBox">
    <ul>
        <li><a href="#">1.学会html5</a><span>2013-09-18</span></li>
        <li><a href="#">2.学会css</a><span>2013-10-09</span></li>
        <li><a href="#">3.学会js</a><span>2013-10-21</span></li>
        <li><a href="#">4.学会css3</a><span>2013-11-01</span></li>
        <li><a href="#">5.学会jq</a><span>2013-11-06</span></li>
        <li><a href="#">6.学会nodejs</a><span>2013-11-08</span></li>
        <li><a href="#">7.学会bootstrap</a><span>2013-11-15</span></li>
        <li><a href="#">8.学会angluasjs</a><span>2013-11-22</span></li>
        <li><a href="#">9.好多东西要学会</a><span>2013-12-06</span></li>
    </ul>
</div>
<div  id ="moocBot"> </div>
</div>

css:

<style>
body {
    font-size: 12px;
    line-height: 24px;
    text-algin: center;  
}
* {
    margin: 0px;
    padding: 0px;  
}
ul {
    list-style: none;
}
a img {
    border: none; 
}
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #ff0000;
}
#mooc {
    width: 399px;
    border: 5px solid #ababab;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px;
    box-shadow: 2px 2px 10px #ababab;
    margin: 50px auto 0;
    text-align: left;  
}   
#moocTitle {
    height: 62px;
    overflow: hidden;
    font-size: 26px;
    line-height: 62px;
    padding-left: 30px;
    background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
    border: 1px solid ##f05e6f;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    color: #fff;
    position: relative;
}
#moocTitle a {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline;
    color: #fff;
    font-size: 12px;
    line-height: 24px;
}
#moocBot {
    width: 399px;
    height: 10px;
    overflow: hidden; 
}
#moocBox {
    height: 144px;
    width: 335px;
    margin-left: 25px;
    margin-top: 10px;
    overflow: hidden;
}
#mooc ul li {
    height: 24px;
}
#mooc ul li a {
    width: 180px;
    float: left;
    display: block;
    overflow: hidden;
    text-indent: 15px;
    height: 24px;
}
#mooc ul li span {
    float: right;
    color: #999;
}
</style>

js:

<script type="text/javascript">
 var area = document.getElementById('moocBox');
 var iliHeight = 24;//单行滚动的高度
 var speed = 50;//滚动的速度
 area.scrollTop=0;
 area.innerHTML+=area.innerHTML;//克隆一份一样的内容
var timer=null;
function startMove(){
    area.scrollTop++;
    if(area.scrollTop % iliHeight == 0){
        clearInterval(timer);
        setTimeout("startMove()", 1000);
    }
    else{
        if(area.scrollTop >= area.scrollHeight/2 ){
            area.scrollTop = 0;
        }
        setTimeout("startMove()",50);
    }
}
startMove();
 </script>

 

效果图

 PS:那啥，颜色啥的就别在意，优先级的问题，我的被博客园自带的给覆盖了。懒得改了

消息轮转更多>>
 

 

以上内容，如有错误请指出，不甚感激。

posted @ 2016-07-29 09:27  FIONA-SUN  阅读(885)  评论(0)  编辑  收藏  举报