正文
jquery弹幕,jq弹幕怎么写
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
acfun首页这个弹幕滑动效果怎么实现，要能循环播放的，我试着用jQuery写了一个，但没达到它这个效果
随便写了一个，应该差不多。喜欢的话就参考一下
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
script type="text/javascript" src="jquery-1.9.1.min.js"/script
style type="text/css"
.barrager{width:800px;background:#fff;margin:0 auto;height:500px;overflow:hidden;position:relative;}
.barrager div{position:absolute;}
.addBarrager{border:1px solid #d5d5d5;height:75px;width:800px;margin:0 auto 30px;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px;}
.addBarrager input{height:38px;margin-top:20px;margin-left:2%;width:70%;text-indent:30px;border:none;line-height:38px;font-size:20px;}
.addBarrager .submit{height:38px;background:#fff;font-size:20px;font-family: "微软雅黑";width:25%;margin-top:20px;border-left:1px solid #d5d5d5;}
/style
/head
body
div class="barrager"
divspan我的女神/span/div
divspan温婉而雅/span/div
divspan温柔美丽/span/div
divspan温柔美丽/span/div
divspan温柔美丽/span/div
divspan我最爱的叶老师/span/div
divspan气质型/span/div
divspan风趣幽默/span/div
divspan风趣幽默/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;iitem.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("divspan class='new'"+_val.val()+"/span/div");
_this._init();
_val.val("");
}
};
$.fn.barrager = function (opt) {
var bger = new Barrager(this,opt);
}
})(jQuery);
/script
/body
/html
相关问答
Q1: b站黑科技是什么
【b站黑科技插件原理分析】
黑科技插件的启用代码是这个：
javascript:$('script').attr('src','//b.dianbo.me/h.js').appendTo($('head'));
这个是jquery附加了一段js到网页，
那么就开始分析这个js。
(function(){ try{ if(window.__prevent_muti_load) return; window.__prevent_muti_load = true; $.ajax({ url:'', data:{url: location.href}, success:function(txt){ var o = $('#bofqi'); var $ori = o.html(); var $new = txt; var isBishi = false; var sw = $('a href="javascript:void(0);"').css({ background: '#6CF url(/images/common/z.png) no-repeat -958px -410px', color: '#FFF', display: 'block', 'border-radius': '5px', border: '1px solid #EEE', padding: '3px 7px 3px 7px', margin: '4px', 'text-align': 'center' }); sw.click(function(){ if( isBishi ){ // current show o.html($ori); sw.html('切换到 bilibili 弹幕播放器，＼(・ω・＼)丧尸！(／・ω・)／bishi♬'); }else{ o.html($new); sw.html('切换到 爱妻一 播放器，不要忘记支持正版哦～♂'); } isBishi = !isBishi; }).click(); o.after( $('div class="scontent"').append(sw) ); }, error:function(e){ alert('虽然不知道为什么。但是失败了- -!'); } }); }catch(e){ ; } })();
这个js显然是jquery写的，内容很基本，但是没有什么东西，只是简单地创建了一个播放器，让播放器之间能够切换。可是核心的部分也就是取得播放器的地址的方式还是不清楚。
那么只好从他的ajax开始了。它的ajax请求了一个php页面，这个页面返回av号对应的播放器地址，比如说
这个实现方式有很多种但是由于它也能解析非新番地址，所以判断这个是使用bilibili的openapi实现的
openapi的说明在
而bilibili的播放器只要提供正确的av号和cid就能播放了。
参考链接：
b站黑科技插件原理分析 | 日志 | 果壳网 科技有意思
附：
B站即bilibili，是中国大陆一个动画、游戏 相关的弹幕视频分享网站，也被称为哔哩哔哩、B站，其前身为视频分享网站Mikufans，现用名来自《魔法禁书目录》中上条当麻对于御坂美琴的昵称“bilibili”（放电国中妹）。网站最大的特点是悬浮于视频上方的实时评论功能。是中国大陆第二家提供这样功能的网站。
网站最初以借鉴其他视频分享网站的资源为主，在国内逐渐注重版权的大形势下进行了合化。
参考链接：
B站黑科技是怎么做到的？ - 视频 - 知乎
Q2: 如何把评论信息加入jquery弹幕插件
插件中定义了弹幕对象，意指具体某一条弹幕及起信息，对象名字叫”danmu”,该对象有如下属性：
text——弹幕文本内容。
color——弹幕颜色。 position——弹幕位置 “0”为滚动 “1” 为顶部 “2”为底部
size——弹幕文字大小。 “0”为小字 ”1”为大字
time——弹幕所出现的时间。 单位为”分秒“（及1/10秒，100毫秒）
isnew——当出现该属性时（属性值科委任意），会认为这是用户新发的弹幕，从而弹幕在显示的时候会有边框。
Q3: jquery弹幕问题
script
$(function(){
$('#send').click(function(){//这个是点击发送按钮
var val=$("#wenben").val();//这个是输入框的内容
$('#myli').append('li class="jschartli hy-chat "p class="text-cont"span class="name"'+ '李四'+':'+'/spanspan class="chat-msg-item"'+val+'/span/p/li');//这段是右侧的发送的弹幕记录
var content=$("div class='text'"+val+"/div");//这是弹幕
var top=Math.random()*$(document.body).height()+50+"px";
content.css("top",top);
$("#js-room-video").append(content);//这个是视频框对象加入弹幕
content.animate({right:$(document.body).width()+100},10000,function(){
$(this).remove();
})
})});
/script
Q4: 看腾讯新闻内容页右下角的弹幕是怎么实现的
我帮你看了下。腾讯新闻内容页右下角的弹幕数据是从评论里按评论时间先后获得的。看了下网络请求，这个弹幕并没有实现实时弹幕，就是你发了一条评论就会立马弹幕出来。而且我发现我发的“垃圾评论”，会被审核掉（删掉），不会显示在评论列表以及弹幕里面（说好的言论自由呢）（当然这么做也可以理解，避免不必要的垃圾评论）。
那么这个实现就可以一切从简了。获取到评论数据后，前台进行处理，加一个在右下角的div透明层用来显示评论弹幕即可，用js+css处理下实现这一好看的样式和效果（当然你也可以尝试爬取过来）。
如果只是求代码的话（我其实不是很喜欢伸手党），有人写了一个jquery弹幕插件，你可以看看。具体看附件吧。
Q5: jquery实现弹幕效果怎么移动
用jquery写了一个弹幕的小功能，供大家参考学习。
前端显示
[html] view plain copy
span style="font-size:18px;"div class="boxDom" id="boxDom"
div class="idDom" id="idDom"
div class="content"
p class="title"吐槽:/p
input type="text" class="text" id="text" /
button type="button" class="btn" id="btn"发射/button
/div
/div
/div/span
样式
[css] view plain copy
span style="font-size:14px;"html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
.boxDom {
width:100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 60px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width:430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top:0px;
bottom:0px;
margin:auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align:bottom;
color:#fff;
}
.text {
border:none;
width:300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width:60px;
height: 30px;
background: #f90000;
border:none;
color:#fff;
font-size: 2.4em;
}
.string {
width:300px;
height: 40px;
position: absolute;
overflow: hidden;
color:#000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space:nowrap;
}/span
JS
[javascript] view plain copy
span style="font-size:14px;" $(function(){
var pageW=parseInt($(document).width()); //获取页面宽度
//alert(pageW);
var pageH=parseInt($(document).height()); //获取页面高度
var boxDom=$("#boxDom");
var btnDom=$("#btn");
var Top,Right;
var width;
width=pageW;
var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
btnDom.bind("click",auto);
function auto(){
var creSpan=$("span class='string'/span");
var text=$("#text").val();
//alert(text);
creSpan.text(text);
//alert(creSpan.text());
Top=parseInt(pageH*(Math.random()));
var num=parseInt(colorArr.length*(Math.random()));
if(ToppageH-90){
Top=pageH-90;
}
//creSpan.css({"top":Top,"right":-300,"color":colorArr[num]});
creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});//扩展字幕颜色
boxDom.append(creSpan);
var spanDom=$("#boxDomspan:last-child");
//alert(spanDom.html());
spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
$(this).remove();
});
}
function getRandomColor(){
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h;
})((Math.random() * 0x1000000 0).toString(16));
}
});/span
