jQuery简单的发布文字弹幕显示动画特效，适用于对人物的印象描述，弹幕文字向左滚动展示。
js代码
<scriptsrc="js/jquery-3.0.0.min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".barrager").barrager()
});
(function(){
varBarrager=function(ele,options){
vardefaults={
color:["#ff9999","#35d2f4","#9ee353","#9d77ff","#4785d9","#ff9333","#5bdea8","#51befc"],
wrap:ele
};
this.settings=$.extend({},defaults,options||{});
this._init();
this.bindEven();
};
Barrager.prototype={
_init:function(){
varitem=$(this.settings.wrap).find("div");
for(vari=0;i<item.length;i++){
item.eq(i).css({
top:this.getReandomTop()+"px",
color:this.getReandomColor(),
fontSize:this.getReandomSize()+"px"
});
item.eq(i).css({
right:-item.eq(i).width()
})
}
this.randomTime(0);
},
bindEven:function(){
var_this=this;
$(".addBarrager.submit").on('click',function(){
_this._click(_this);
});
},
getReandomColor:function(){
varmax=this.settings.color.length;
varrandomNum=Math.floor(Math.random()*max);
returnthis.settings.color[randomNum];
},
getReandomTop:function(){
vartop=(Math.random()*450).toFixed(1);
returntop;
},
getReandomSize:function(){
varsize=(12+Math.random()*28);
returnsize;
},
getReandomTime:function(){
vartime=Math.floor((8+Math.random()*10));
returntime*1000;
},
randomTime:function(n){
varobj=$(this.settings.wrap).find("div");
var_this=this;
varlen=obj.length;
if(n>=len){
n=0;
}
setTimeout(function(){
n++;
_this.randomTime(n)
},1000);
varitem=obj.eq(n),_w=item.outerWidth(!0);
item.animate({
left:-_w
},_this.getReandomTime(),"linear",function(){
item.css({right:-_w,left:""});
_this.randomTime(n)
});
},
_click:function(obj){
var_this=obj;
var_val=$(".barVal");
if(_val.val()==""){
alert("请描述你对TA的印象！");
returnfalse;
}
$(_this.settings.wrap).append("<div><spanclass='new'>"+_val.val()+"</span></div>");
_this._init();
_val.val("");
}
};
$.fn.barrager=function(opt){
varbger=newBarrager(this,opt);
}
})(jQuery);
</script>
下载
|
|
置顶卡
变色卡