jQuery+css3 弹幕
写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器
html部分
自己设置样式,定义#danmu 的长宽,区域等
<div id="danmu"></div>
js引用
$("#danmu").danmu({
minSpeed : 3000,
maxSpeed: 5000,
_text : [//不设置color和fontSize时会从默认值里面随机挑选
{"text":"11111","color":"#000","fontSize":"14px"},
{"text":"222","color":"#ff4141","fontSize":"14px"},
{"text":"333","color":"#60c7d0","fontSize":"16px"},
{"text":"44","color":"#ff8201","fontSize":"14px"},
{"text":"5555","color":"#10ad54","fontSize":"18px"},
{"text":"666","color":"#2c8ac0","fontSize":"20px"}
// {"text":"11111"},
// {"text":"222"},
// {"text":"333"},
// {"text":"44"},
// {"text":"5555"},
// {"text":"666"}
]
})
可设置实时发送弹幕,不会跟初始化冲突,你需要做的就是拼数组给danmu
$("#danmuBtn").click(function(){//发布信息触发
$("#danmu").danmu({
_text:[{"text":$("#danmuText").val(),"fontSize":"24px"}]
})
})
js部分
(function($){
$.fn.danmu = function(o){
var defs = {
minSpeed : 3000,
maxSpeed : 5000,
_text:[],
_color:['#333','#ff4141','#60c7d0','#ff8201','#10ad54','#2c8ac0'],
_fontSize:['14px','16px','18px','20px','22px','24px']
}
var opt = $.fn.extend({}, defs , o);
var $this = $(this);
var method = {
creatEle:function(){
if($this.find(".cont").length==0){
$this.append('<div class="cont" style="width:100%; height:100%; position:relative"></div>')
}
$.each(opt._text,function(index,value){
var num = method.setRandomNum(0,6);
var color,fontSize;
if(value.color){color = value.color}else{color = opt._color[num]}
if(value.fontSize){fontSize = value.fontSize}else{fontSize = opt._fontSize[num]}
var style = 'position:absolute;white-space:nowrap; left:'+$this.width()+'px;color:'+color+';font-size:'+fontSize+';';
var speed = (method.setRandomNum(opt.minSpeed,opt.maxSpeed)/1000).toFixed(1); //获取范围内随机速度
var delay = (method.setRandomNum(0,1000)/1000).toFixed(1);//获取范围内随机延迟时间
var top = method.setRandomNum(0,parseInt($this.height())-30);//获取范围内随机垂直定位
style += 'top:'+top+'px;-webkit-transition:all '+speed+'s linear;-webkit-transition-delay:'+delay+'s;';
$this.find(".cont").append('<span class="text" style = "'+style+'">'+value.text+'</span>');
var time = parseInt(speed+delay)*1500;
method.clear($this.find(".text").eq(index),time)
})
method.moveing() },
moveing:function(){
$.each($this.find(".text"),function(index,value){
var width = parseInt($this.width())+parseInt($(this).width());
$(this).css({"-webkit-transform":"translate3d("+-width+"px,0,0)"})
})
},
clear:function($obj,time){
console.log($obj,time)
setTimeout(function(){
$obj.remove()
},time)
},
setRandomNum:function(a,b){
return parseInt(a+(b-a)*Math.random())
},
init:function(){
method.creatEle()
}
}
method.init()
}
})(jQuery);
jQuery+css3 弹幕的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 使用 jQuery & CSS3 实现翻转的作品集滑块
作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- 【特别推荐】8个富有创意的jQuery/CSS3插件
现在的互联网上什么都有,但是真正好的创意却非常稀缺,包括WEB界面也是如此,今天我们要特别推荐8个富有创意的jQuery/CSS3插件,也许这几个插件能让你的WEB界面更加富有创意和人性化. 1.jQ ...
随机推荐
- Javaweb学习笔记——EL表达式
一.前言 EL表达式是什么? 简而言之,可以这样理解,EL表达式全名为:Exprexxsion Language,原先是JSTL 1.0为了方便存取数据而定义的语言,到了JSTL 2.0便正式成为标准 ...
- html5实现银联海购商品分类列表
银联海购官网请点击 http://haigou.unionpay.com/ 1.实现效果预览展示如下: 2.源码如下 <!DOCTYPE html> <html> <he ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题
没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...
- C#读取ini文件的方法
最近项目用到ini文件,读取ini文件,方法如下: using System; using System.Collections.Generic; using System.Linq; using S ...
- ArcGIS JS 学习笔记4 实现地图联动
1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备 ...
- isKindOfClass和isMemberOfClass 区别
isKindOfClass和isMemberOfClass 都是NSObject的比较Class的方法. 但两个有很大区别: isKindOfClass来确定一个对象是否是一个类的成员,或者是派生 ...
- n个元素的入栈顺序有多少种出栈顺序?
问题:w1.w2.w3.w4.w5,5个元素将会按顺序入栈,求出栈顺序有多少种情况. 先写一下结论方便记忆: 1个元素:1种 2个元素:2种 3个元素:5种 4个元素:14种 5个元素:42种 简单的 ...
- Android添加图片到ListView或者 RecyclerView显示
先上图 点击+号就去选择图片 实际上这个添加本身就是一个ListView或者 RecyclerView 只是布局有些特殊 item <?xml version="1.0" e ...
- 【转】Android Studio下加入百度地图的使用 (一)——环境搭建
最近有学 生要做毕业设计,会使用到定位及地图信息的功能,特此研究了一下,供大家参考,百度定位SDK已经更新到了5.0,地图SDK已经更新到了3.5,但是在 AndroidStudio中使用还是存在一些 ...