php滚动播报,基于JavaScript实现新增内容滚动播放效果附完整代码

先给大家展示下效果图：

完整demo如下

每两秒随机向上或者向下滚动，如果要替换新内容，则通过html()更新内容即可(查看注释代码)

ul,li{

list-style-type:none;

border: solid;

}

ul{

overflow: hidden;/*让li超出ul时隐藏*/

}

body{

margin: 0px;

}

• 

• 
• 

function getRandom(min, max){

var r = Math.random() * (max - min);

var re = Math.round(r + min);

re = Math.max(Math.min(re, max), min)

return re;

}

$(function(){

setInterval(function(){

if(getRandom(0,1)==0){

//向上滚动特效

var ul = $("ul");

var $first = ul.find('li:first');

var height = $first.height();

$first.animate({

marginTop: -height + 'px'

}, 500, function() {

// $first.css('marginTop', 0).html(new Date().getMinutes()+":"+new Date().getSeconds()).appendTo(ul);/*不要写成append*/

$first.css('marginTop', 0).appendTo(ul);

});

}else{

//向下滚

var ul = $("ul");

var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度

ul.animate({marginTop : liHeight +"px"},500,function(){

// ul.find("li:last").html(new Date().getMinutes()+":"+new Date().getSeconds()).prependTo(ul);/*不要写成prepend*/

ul.find("li:last").prependTo(ul);/*不要写成prepend*/

ul.find("li:first").hide();

ul.css({marginTop:0});

ul.find("li:first").fadeIn(1000);

});

}

},2000);

});