html炫酷弹幕特效,jQuery文字弹幕特效

特效描述：jQuery 文字弹幕特效。jQuery文字弹幕特效

代码结构

1. 引入JS

2. HTML代码

弹幕(点我呀！！)

X

让我来一个弹幕

嘿嘿

赞你

哈哈

51前端

$(function(){

init_screen();

//alert("您好");

$("#btn,.d_del").click(function(){

$(".dm,.d_del").toggle(1000);

});

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

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

var div="

"+text+"

";

$(".d_show").append(div);

init_screen();

})

});

//初始化弹幕

function init_screen(){

var _top=0;

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

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

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

_top=_top+76;

if(_top>=_height-100){

_top=0;

}

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

var time=10000;

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

time=15000;

}

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

});

});

}

//随机获取颜色值

function getReandomColor(){

return '#'+(function(h){

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

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

}