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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JavaScript十大取整方法实例教程
Dec 03 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数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
了解JavaScript函数中的默认参数
2019/05/30 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
JS数据类型STRING使用实例解析
2019/12/18 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python实现SMTP邮件发送
2020/06/16 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
体育专业学生自我评价范文
2014/01/17 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js