特效描述：利用jQuery實現(xiàn) 輸入文字 彈幕顯示 動畫特效，利用jQuery實現(xiàn)輸入文字彈幕顯示動畫特效

宜章網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

代碼結(jié)構(gòu)

1. 引入JS

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

1. 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>氣質(zhì)型</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">發(fā)布</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>

分享題目：jQuery制作輸入文字彈幕顯示動畫效果
分享鏈接：http://jinyejixie.com/article10/iiscgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站改版、服務(wù)器托管、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)