<div class="inform" style="">
<div style="height:35px; overflow:hidden;">
<ul id="marquee" style="height:35px;">
<li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">****已预订****</a></li>
<li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">
****已预订****</a></li>
</ul>
</div>
<script type="text/javascript">
var liheight = $('#marquee li').eq(0).outerheight();
//$('#marquee').css('height',liheight * $('#marquee li').length * 2);
settimeout("startmarquee("+ liheight +", 50, 500, 'marquee')", 500);
function startmarquee(lh,speed,delay,id) {
var t;
var p = false;
var o = document.getelementbyid(id);
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 += 1;
}
function scrolling() {
if(o.scrolltop%lh != 0) {
o.scrolltop += 1;
if(o.scrolltop >= o.scrollheight / 2) o.scrolltop = 0;
} else {
clearinterval(t);
settimeout(start,delay);
}
}
settimeout(start,delay);
}
</script>
</div>
.inform {
padding: 1px;
margin: 10px auto;
/*position: fixed; bottom:80px;left: 50%;*/ width: 6.8rem;font-size: 12px;/*margin-left: -3.4rem;*/ border: none; background-color:rgba(238,115,115,0.3); border-radius: 10px;
}
.inform h2 {
background: none repeat scroll 0 0 #015198;
font-weight: normal;
line-height: 30px;
}
.inform h2 span {
color: #ffffff;
font-size: 16px;
padding-left: 10px;
}
.inform h2 a {
color: #ffffff;
float: right;
font-size: 14px;
padding-right: 3px;
}
.inform ul {
height: 170px;
margin-top: 7px;
overflow: hidden;
}
.inform ul li {
line-height: 26px;
padding-left: 12px;
}
以上就是js实现消息滚动效果的方法的详细内容。