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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
js编写三级联动简单案例
Dec 21 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
原生js实现随机点名功能
Nov 05 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
Javascript 对象的解释
2008/11/24 Javascript
js 操作css实现代码
2009/06/11 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
js实现星星打分效果
2020/07/05 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python最基本的输入输出详解
2015/04/25 Python
python 正确保留多位小数的实例
2018/07/16 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python获取整个网页源码的方法
2020/08/03 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
财务管理专业自荐书
2014/09/02 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
返乡农民工证明
2015/06/24 职场文书
2015中学政教处工作总结
2015/07/22 职场文书