有朋友看中了别人网站的弹幕效果,但是想拔那个效果,我看了一下太过于复杂。百度上找了一下素材,发现下面这个特别简单。先引入JQ,然后在网页底部加入以下代码就可以实现了。
其中的
{pboot:list scode=8 num=10} <div><span>[list:title lencn=10]</span></div> {/pboot:list}
是调用的后台数据,如果你使用的是DEDE,可以换成DEDE的标签即可。
直接上代码。
<style type="text/css"> .barrager{width:100%; margin:0 auto;height:500px;overflow:hidden;position:fixed; bottom: 0; left:0; z-index: 9999999999999999999999999;} .barrager div{position:absolute; } .barrager div span{ height: 30px; line-height: 30px; background:rgba(0,0,0,0.3); border-radius: 20px; padding:5px 15px;} </style> <div class="barrager"> {pboot:list scode=8 num=10} <div><span>[list:title lencn=10]</span></div> {/pboot:list} </div>
<script type="text/javascript">
$(function () {
$(".barrager").barrager()
});
(function () {
var Barrager = function (ele,options) {
var defaults = {
color:["#ee0038","#00f300","#fdef13","#fff","#fd13f5","#05fff6","#c445ff","#fff"],
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()*16);
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>
大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...
在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...
*近在维护一台服务器的时候发现这台服务器CPU一直在99%到100%。服务器上运行的网站不多,也才3个.一开始怀...
安装好宝塔面板之后,我们进行安全扫描,会发现至少扫描出十几个风险。如果有钱,就直接企业版,一键进行修...