利用jQuery实现输入文字弹幕显示动画特效

Posted 2021-03-18

特效描述：利用jQuery实现 输入文字 弹幕显示 动画特效，利用jQuery实现输入文字弹幕显示动画特效

代码结构

1. 引入JS

<script src="js/jquery-3.0.0.min.js"></script>

2. html代码

<div class="barrager">
<div><span>我的女神</span></div>
<div><span>温婉而雅</span></div>
<div><span>温柔美丽</span></div>
<div><span>温柔美丽</span></div>
<div><span>温柔美丽</span></div>
<div><span>我最爱的叶老师</span></div>
<div><span>气质型</span></div>
<div><span>风趣幽默</span></div>
<div><span>风趣幽默</span></div>
</div>
<div class="addBarrager clearfix">
<input type="text" maxlength="10" autocomplete="off" class="fl barVal" placeholder="描述你对TA的印象 限10个字">
<button class="submit fr">发布</button>
</div>
<script type="text/javascript">
$(function () {
$(".barrager").barrager()
});
(function () {
var Barrager = function (ele,options) {
var defaults = {
color:["#ff9999","#35d2f4","#9ee353","#9d77ff","#4785d9","#ff9333","#5bdea8","#51befc"],
wrap:ele
};
this.settings = $.extend({},defaults,options||{});
this._init();
this.bindEven();
};
Barrager.prototype = {
_init:function () {
var item = $(this.settings.wrap).find("div");
for(var i = 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 () {
var max = this.settings.color.length;
var randomNum = Math.floor(Math.random()max);
return this.settings.color[randomNum];
},
getReandomTop:function () {
var top = (Math.random()450).toFixed(1);
return top;
},
getReandomSize:function () {
var size = (12+Math.random()28);
return size;
},
getReandomTime:function () {
var time = Math.floor((8+Math.random()10));
return time*1000;
},
randomTime:function (n) {
var obj = $(this.settings.wrap).find("div");
var _this = this;
var len = obj.length;
if(n>=len){
n=0;
}
setTimeout(function () {
n++;
_this.randomTime(n)
},1000);
var item = 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的印象！");
return false;
}
$(_this.settings.wrap).append("<div><span class=‘new‘>"+_val.val()+"</span></div>");
_this._init();
_val.val("");
}
};
$.fn.barrager = function (opt) {
var bger = new Barrager(this,opt);
}
})(jQuery);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
</div>

如若转载请注明出处： https://www.aoym.cn/10077.html