JavaScript实现Flash炫光波动特效


Posted in Javascript onMay 14, 2015

看到flash的实现这类的动画非常的便捷,于是试图胡搞一下。全部是用dom模拟的像素点,锯齿是难免的……

这个要避免锯齿恐怕要再加一次滤镜了吧,或者用图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>炫光波动效果</title>
<script>
var lightWave = function(T,left,thick,sharp,speed,vibration,amplitude,opacity){
this.cont = T;//炫光容器
this.left = left;//炫光向右偏移量
this.thick = thick;//粗细
this.sharp = sharp;//尖锐度
this.speed = speed;//波动速度
this.vibration = vibration;//单位时间内的振动频率
this.amplitude = amplitude;//振幅
this.opacity = opacity;//透明度
this.cont.style.position = 'relative';
this.move();
}
lightWave.prototype = {
point:function(n,l,t,c,color){
var p = document.createElement('p');
p.innerHTML = ' ';
p.style.top = t + 'px';
p.style.left = l + 'px';
p.style.width = 1 + 'px';
p.style.height = n + 'px';
p.style.filter = 'alpha(opacity='+this.opacity+')';
p.style.lineHeight = 0;
p.style.position = 'absolute';
p.style.background = color;
c.appendChild(p);
return this;
},
color:function(){
var c = ['0','3','6','9','c','f'];
var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
t.sort(function(){return Math.random()>0.5?-1:1;});
return '#'+t.join('');
},
wave:function(){
var l = this.left,t = this.wavelength,color = this.color();
var c = document.createElement('div');
c.style.top = this.amplitude+20+'px';
c.style.position = 'absolute';
c.style.opacity = this.opacity/100;
for(var i=1;i<this.thick;i++){
for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
this.point(i,l,-9999,c,color);
}
}
for(var i=this.thick;i>0;i--){
for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
this.point(i,l,-9999,c,color);
}
}
this.cont.appendChild(c);
return c;
},
move:function(){
var wl = this.amplitude;
var vibration = this.vibration;
var w = this.wave().getElementsByTagName('p');
for(var i=0;i<w.length;i++){
w[i].i = i;
}
var m = function(){
for(var i=0,len=w.length;i<len;i++){
if(w[i].ori == true){
w[i].i-=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)<=-wl){
w[i].ori = false;
}
}else{
w[i].i+=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)>=wl){
w[i].ori = true;
}
}
}
}
setInterval(m,this.speed);
}
}
window.onload = function(){
var targetDom = document.body;
new lightWave(targetDom,0,3,36,120,6,20,40);
new lightWave(targetDom,50,2,70,120,10,30,30);
}
</script>
</head>
<body style="background:#000;margin-top:100px">
</body>
</html>

参数:

var lightWave = function (T,left,thick,sharp,speed,vibration,amplitude,opacity){
    this .cont = T; //需要添加炫光的容器
    this .left = left; //炫光出生时的向右偏移量
    this .thick = thick; //粗细程度
    this .sharp = sharp; //尖锐程度
    this .speed = speed; //波动速度
    this.vibration = vibration; //单位时间内的振动频率
    this .amplitude = amplitude; //振幅
    this .opacity = opacity; //透明度
    this .cont.style.position = 'relative';
    this .move();
}

大家感兴趣可以来讨论一下。

另外,还遇到个问题,上面代码中ie下面的透明度滤镜不起作用,经研究得知,改变父容器的定位会影响子节点的透明滤镜的继承。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
详解JavaScript 异步编程
Jul 13 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 #Javascript
javascript搜索框效果实现方法
May 14 #Javascript
javascript操作ul中li的方法
May 14 #Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP引用的调用方法分析
2016/04/25 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
python读取注册表中值的方法
2013/04/08 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Django接收自定义http header过程详解
2019/08/23 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
python pillow库的基础使用教程
2021/01/13 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
董事长秘书岗位职责
2013/11/29 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
java实现面板之间切换功能
2022/06/10 Java/Android
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript