html 5的弹幕滚动效果,JQuery简单实现弹幕滑动效果

某需求需要这么玩

于是写了个，备份用

Document

body {

margin: 0px;

padding: 0px;

}

.container {

position: relative;

background-color:pink;

height:500px;

width:100%;

overflow: hidden;

}

.danmaku {

display: inline-block;

position: absolute;

overflow: hidden;

}

click me!

(document).ready(function(){("#adddanmaku").click(function(){

addDanmaku("danmakutest!");

});

});

function addDanmaku(str)

{

(".container").append("

" + str + "

");

var _dm =(".container").children(".danmaku").last();

var _width = _dm.width();

var container_height = (".container").height();

var randtop = Math.floor(Math.random()*3*100);//5根据container高度进行自行调整

var _top = randtop>container_height?"0":randtop;

_dm.css({"right": -(_width),

"top": _top,

"color": "#"+(~~(Math.random()*(1<<24))).toString(16)//随机颜色

});

_dm.animate({left:-(_width)}, 16000, "linear", function(){(this).remove();});//弹幕滑行时间可自行调整or随机

}

那个随机颜色是某天看到知乎的一篇回答顺手记下的。