实现弹幕php代码,jQuery如何实现弹幕？jQuery实现弹幕效果的代码

本篇文章给大家带来的内容是关于jQuery如何实现弹幕？jQuery实现弹幕效果的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

jQuery实现弹幕效果的代码如下：

JQ实现弹幕效果

*{

padding: 0;

margin: 0;

}

#box{

height:700px;

width:1000px;

margin: 0 auto;

border:1px solid #000000;

position: relative;

}

#main{

width:100%;

height:605px;

position: relative;

overflow: hidden;

}

p{

position: absolute;

left:1000px;

width:200px;

top:0;

}

#bottom{

width:100%;

height:80px;

background: #ABCDEF;

text-align: center;

padding-top: 15px;

position: absolute;

left: 0;

bottom: 0;

}

#txt{

width:300px;

height:50px;

}

#btn{

width:100px;

height:50px;

}

$(function(){ var pageH=parseInt($("#main").height()); var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];

$("#btn").bind("click",auto);

document.οnkeydοwn=function(e){ if(e.keyCode == 13){

auto();

}

}; function auto(){ var $value = $("#txt").val();

$("#main").append("

" + $value + "

");

$("#txt").val(""); var _top=parseInt(pageH*(Math.random())); var num=parseInt(colorArr.length*(Math.random()));

$("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});

$("p:last-child").animate({"left":"-200px"},10000);

$("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){

$(this).remove();

});

//console.log($value); };

})

相关文章推荐：