之前写的一个小例子,整理一下后发上来,先上效果图,比较简单粗暴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);