-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.htm
192 lines (150 loc) · 7.14 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html>
<head>
<!--
___________ .__ __ __ __ .__ .___
\_ _____/___ |__| | __ ____ / \ / \___________| | __| _/
| __)/ __ \| | |/ // __ \ \ \/\/ / _ \_ __ \ | / __ |
| \\ ___/| | <\ ___/ \ ( <_> ) | \/ |__/ /_/ |
\___ / \___ >__|__|_ \\___ > \__/\ / \____/|__| |____/\____ |
\/ \/ \/ \/ \/ \/
肥客联邦
http://www.FK68.net/
-->
<meta charset="utf-8">
<title>FK弹幕效果</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimal-ui">
<script src="jquery.min.js"></script>
</head>
<body>
<div id='feikeq' style="background: #ccc; border: 1px solid red;">
<img style="height: 300px;" src="Desert.jpg"/>
</div>
<div style="position: absolute; overflow: hidden;white-space:nowrap; z-index: 9999;left: 0; top: 0; background: #ff0; line-height: 30px; height: 30px; width: 199px;display: none;">
<span style="background: #f0f; padding: 0; margin-left:100%;">margin:100%;使对象向右移动一段距离，这段距离等于父体的内容宽度。</span>
</div>
<a href="javascript:gogogo()"><测试></a>
<script>
/*! FKbarrage v1.2 | FeikeWrold | www.fk68.net */
// 创建一个闭包 相当于 var jq = function($){}; jq(jQuery); //把Jquery当参传入 兼容jQuery操作符'$'和'jQuery '
(function ($){
// 插件的定义
$.fn.fkbarrage=function(options ){
// 在这里没有必要使用$(this)因为$(this) 跟 $($('#element'))是一样的
var $this = this;
//合并设置结果
var settings = $.extend({
ratio:4, //比例占屏幕宽度的 4%
style:'', //自定义样式
speed: 5000 //从左至右的速度
}, options );
//定义当前正在显示的列表
var showList={};
//定义插件方法
var myfunction ={
pusshtxt:function(txt,style){
//得到容器window宽高
var box_w = $(window).width();
var box_h = $(window).height();
var ratio = settings.ratio;
var fontsize = ratio*0.625; //字体大小为高度的 62%
//字幕的now高
var now_h = parseInt(box_w * (ratio /100));
var now_n = now_h*4; // 间隔为高的4倍
//得到总行数
var counts = parseInt(box_h / now_h);
///*当前时间戳做为ID*/
var now_id = new Date().getTime();
var box_t ; //当前这行的位置
var ii =1 ; //当前这行的位置
//得到ID去取marging 的位置，或取相对位置。用数组去存行信息
for (ii; ii <= counts; ii++) {
if(!showList[ii]){
showList[ii] = now_id;
box_t = ii * now_h - now_h;
break;
}
};
// console.log(showList);
var divhtm ='<div id="now_'+now_id+'" style="height:'+ratio+'vw;line-height:'+ratio+'vw;position: absolute;white-space:nowrap;z-index: 9999;left:0;top:'+box_t+'px;'+settings.style+'">';
divhtm += '<span id='+now_id+' style="opacity:0;font-size:'+fontsize+'vw;line-height:'+ratio+'vw; padding-right:'+parseInt(fontsize)+'vw; border-radius:'+ratio+'vw;display: inline-block;font-weight: bold; background-color: #000;color: #fff;';
divhtm += style+'">'+txt+'</span></div>';
var Obj_now = $this.append(divhtm).find('#now_'+now_id +' span');
//console.log(Obj_now);
//得到字幕长度
var now_lg = Obj_now.width() +now_n;
//计算速度
//甄伟佳提供以时间速度的算法 时间线=(0.2/499)x初始时间x字符长度 + (399/499)x初始时间;
var stepnum = parseInt((0.5/499)*now_lg*settings.speed + (249/499)* settings.speed); //区间调大了，只是是0.8现在是对半
//开始动画
Obj_now.css({marginLeft:box_w,opacity:1}).animate(
{marginLeft: - now_lg},
{
duration:stepnum,
step: function(now, fx) {
//动画中途结束 做的操作
//得到尾吧位置阀值
var now_wb = box_w - now_lg ; //如果比宽长就是负数如果没宽长就是正数哈哈
if(now < now_wb){
//$(this).stop();//让当前动画直接到达末状态 ，继续下一个动画
//console.log(showList[i] +'=='+this.id);
//保证只移除自己那行
if(showList[ii] == this.id){
delete showList[ii]; //删除这个标记 确保在这行上出现2条字幕
}
}
},
done:function(animation,jumpedToEnd){
$(this).parent().remove();//动画完全结束
}
}
);
//结束动画
},
stoptxt:function(e){
console.log('肥客联邦');
},
hidetxt:function(e){
console.log('http://www.fk68.net');
}
};
return myfunction;
};
})(jQuery);
// 闭包结束
var barrage =$('#feikeq').fkbarrage({
ratio:2, //比例占屏幕宽度的 4%
//style:'padding:20px;', //自定义弹幕外层DIV样式
speed:7000 //从左至右的速度
});
/*
//弹幕 gogogo('500x500.png','这是一条测试');gogogo('500x500.png','真的你信不处要夲在要工这是一条测试');
function gogogo(img,txt){
var tmpstr='<img src="'+img+'" style="width:4vw;height:4vw;border-radius: 4vw;vertical-align: top;">'+txt;
var tmparr=["color: #fff;font-Size: 12;fontWeight: bold;color:#eee","color: #ddd",'color: #ccc','font-Size: 40px','color: #0ff','color: #ff0','font-Weight: bold','color: #cccccc'];
//console.log(tmpstr[keys]); //文字内容
//console.log(tmparr[keys]); //自定义样式内层滚动字样式
barrage.pusshtxt(tmpstr,'');
}
*/
function gogogo(){
var tmpstr=[
'字少',
'得到字幕长度',
'得到字幕长度和值的对象',
'一个对像的属性和值的对象，',
'一个对像的属性和值的对象，动画将根据这组对象移动。',
'一个对像的属性和值的对象，动画将根据这组对象移动。方法主要有三种 转换函数、',
'一个对像的属性和值的对象，动画将根据这组对象移动。方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转',
'一个对像的属性和值的对象，动画将根据这组对象移动。方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转得到字幕长度得到字幕长度和值的对象',
'一个对像的属性和值的对象，动画将根ds强制类型转换、利用js变量弱ssdsdsd我为要枳要工类型转'
];
var tmparr=["color: #fff;font-Size: 12;fontWeight: bold;color:#eee","color: #ddd",'color: #ccc','font-Size: 40px','color: #0ff','color: #ff0','font-Weight: bold','color: #cccccc'];
var keys = parseInt(8*Math.random());
//console.log(tmpstr[keys]); //文字内容
//console.log(tmparr[keys]); //自定义样式内层滚动字样式
barrage.pusshtxt(tmpstr[keys],tmparr[keys]);
}
</script>
</body>
</html>