html animate颜色,利用jQuery的animate动画效果实现，文字可以随机变化颜色

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Java开发视频弹幕技术SreenText

*{margin:0;padding:0;}

body{background:#09c;font-size:12px;font-family:"微软雅黑";}

/*screen start*/

#click_screen{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#fff;font-family:"微软雅黑";position:absolute;top:20px;left:20px;}

.screen{width:100%;height:100%;position:absolute;left:0;top:0;display:none;}

.screen .s_dm{}

.screen .s_dm .s_close{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#c0c0c0;font-family:"微软雅黑";position:absolute;top:20px;right:20px;z-index:3;}

.screen .s_dm .s_close:hover{color:#fff;}

.screen .s_dm .s_show{position:relative;z-index:2;}

.screen .s_dm .s_show div{line-height:36px;font-size:24px;font-weight:bold;position:absolute;top:0;left:0;}

.screen .send{width:100%;height:80px;background:#000;position:absolute;bottom:0;z-index:2;}

.screen .send .s_con{width:100%;height:80px;text-align:center;line-height:80px;}

.screen .send .s_con .s_txt{width:700px;height:40px;border:0;font-size:18px;font-family:"微软雅黑";padding-left:12px;border-radius:3px 0 0 3px;outline:none;}

.screen .send .s_con .s_btn{width:100px;height:40px;background:#088;border:0;font-size:18px;font-family:"微软雅黑";color:#fff;cursor:pointer;border-radius:0 3px 3px 0;outline:none;}

.screen .send .s_con .s_btn:hover{background:#006c6c;}

.screen .s_dm .mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:1;}

/*end screen*/

点击弹幕

退出弹幕

$(function(){

//点击展开

$("#click_screen").click(function(){

$(".screen").toggle(600);

});

$(".s_close").click(function(){

$(".screen").toggle(600);

});

//发表评论

$(".s_btn").click(function(){

var text=$(".s_txt").val();

$(".s_show").append("

"+text+"

");

init_screen();

});

$(".s_txt").keydown(function(){

var code = window.event.keyCode;

//alert(code);

if(code == 13)//回车键按下时，输出到弹幕

{

var text=$(".s_txt").val();

$(".s_show").append("

"+text+"

");

init_screen();

}

});

});

//初始化弹幕

function init_screen(){

var _top=0;

$(".s_show").find("div").show().each(function(){

var _left=$(window).width()-$(this).width();

var _height=$(window).height();

_top=_top+80;

if(_top>_height-100){

_top=80;

}

var time=10000;

if($(this).index()%2==0){

time=20000;

}

//设定文字的初始化位置

$(this).css({left:_left,top:_top,color:getRandomColor()});

$(this).animate({left:"-"+_left+"px"},time,function(){

});

});

}

//随机获取颜色值

function getRandomColor(){

return '#'+(function(h){

return new Array(7-h.length).join("0")+h

})((Math.random()*0x1000000<<0).toString(16))

}

详情教程请参照：http://www.tommydog.info