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 相关文章推荐
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
antd table按表格里的日期去排序操作
Nov 17 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缓存技术的使用说明
2011/08/06 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
CI框架表单验证实例详解
2016/11/21 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
使用Python制作微信跳一跳辅助
2018/01/31 Python
python3实现多线程聊天室
2018/12/12 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
村官学习十八大感想
2014/01/15 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
法律系毕业生求职信
2014/05/28 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
家长通知书家长意见
2014/12/30 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
总经理年会致辞
2015/07/29 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
高一化学教学反思
2016/02/22 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js