Demo-消息链接滚屏效果

之前写的一个小例子，整理一下后发上来，先上效果图，比较简单粗暴QAQ

---

下面是例子代码部分：

**inde.html主要代码**

<div class="box" id="box">
    <div class="img"><img src="0.jpg" alt="**"></div>
</div>

**reset.css代码**

*{
    padding: 0;
    margin: 0;
    }
    a{
        text-decoration: none;
    }
#box{
    margin: 0 auto;
    margin-top: 200px;
    width: 200px;
    height: 30px;
    border: 1px solid black;
    vertical-align:top;
    overflow:hidden;
}
.img{
    position:absolute;
}
img{
    width: 25px;
    height: 25px;
}
.ul{
    margin-top:0; 
    display: inline-block;
}
.ul li{
    list-style:none;
    margin-left:40px;
    font-size: 16px;
    height: 30px;
    line-height:30px;
}

**main.js代码**

///创建信息
function updateGunping(num){//消息条数
    var box=document.getElementById("box");
    var ul=document.createElement("ul");
    ul.className="ul";
    box.appendChild(ul);
    for(var i=0;i<num;i++){
        var li=document.createElement("li");
        li.className="li";
        ul.appendChild(li);
        var a=document.createElement("a");
        a.className="a";
        a.href="#";
        li.appendChild(a);
        a.innerHTML="消息:特大消息--"+Math.floor(Math.random()*10);
    }

}
updateGunping(10);

//滚动


function move(num){//消息条数
    var ul=document.getElementsByTagName("ul")[0];
    var n=ul.style.marginTop;
    var value = n.replace(/[^0-9]/ig,""); //利用正则提取字符串中的数字
    console.log(value); 
    if(value>30*(num-2)){
        ul.style.marginTop=0;
        console.log(ul.style.marginTop);        
    }else{
        console.log(ul.style.marginTop);
        ul.style.marginTop=(-value-30)+'px';
        console.log(ul.style.marginTop);    
    }

}
setInterval("move(10)",1500);