JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

$.coinFlip = function() {

return Math.random() > .75;

}

var h;

var w;

$.move = function(firefly) {

var left = $(firefly).position().left;

var top = $(firefly).position().top;

var size = $(firefly).outerWidth() + 10;

var dirH = parseInt($(firefly).attr('dirH'));

var dirV = parseInt($(firefly).attr('dirV'));

if (left >= w - size - 10 || left <= 10) {

dirH = -dirH;

}

if (top >= h - size - 10 || top <= 10) {

dirV = -dirV;

}

if (dirH > 0) {

$(firefly).addClass('flip');

} else {

$(firefly).removeClass('flip');

}

$(firefly).animate({

left: (left + dirH),

top: (top + dirV)

}, 'fast', 'linear', function() {

setTimeout(function() {

$.move(firefly);

}, 1);

})

.attr('dirH', dirH)

.attr('dirV', dirV);

}

$.star = function() {

var x = Math.max(Math.floor(Math.random() * w), 10);

var y = Math.max(Math.floor(Math.random() * h), 10);

var r = Math.max(Math.floor(Math.random() * 255), 200);

var g = Math.max(Math.floor(Math.random() * 255), 200);

var b = Math.max(Math.floor(Math.random() * 255), 200);

var size = Math.max(Math.round(Math.random() * 3), 1);

if (x >= w) {

x = w - 10;

}

if (y >= h) {

y = h - 10;

}

var star = $('s').first().clone();

$('#sky').append($(star));

$(star).css({

'left': x + 'px',

'top': y + 'px',

'background-color': 'rgb(' + r + ',' + g + ',' + b + ')',

});

if ($.coinFlip()) {

var delay = Math.max(Math.round(Math.random() * 4000), 500);

setTimeout(function() {

$(star).css({

'animation': 'fade 20s linear infinite'

});

}, delay);

}

return star;

}

$.bug = function() {

var multiple = Math.random() * 15;

var dirH = Math.random() > .5 ? -multiple : multiple;

var dirV = Math.random() > .5 ? -multiple : multiple;

var r = Math.max(Math.floor(Math.random() * 255), 100);

var g = Math.max(Math.floor(Math.random() * 255), 100);

var b = Math.max(Math.floor(Math.random() * 255), 100);

if (r == g) {

b = 0;

} else if (r == b) {

g = 0;

} else if (b == g) {

r = 0;

}

var x = Math.max(Math.floor(Math.random() * w), 10);

var y = Math.max(Math.floor(Math.random() * h), 10);

if (x >= w) {

x = w - 10;

}

if (y >= h) {

y = h - 10;

}

var firefly = $('.fly').first().clone();

$('#sky').append($(firefly));

$(firefly).css({

'left': x + 'px',

'top': y + 'px'

})

.attr('dirH', dirH)

.attr('dirV', dirV);

$(firefly).find('.light').css({

'background-color': 'rgb(' + r + ',' + g + ',' + b + ')',

'box-shadow': 'inset 0 0 20px rgb(' + r + ',' + g + ',' + b + '), 0 0 10px rgb(' + r + ',' + g + ',' + b + ')'

});

$(firefly).fadeIn();

var delay = Math.max(Math.round(Math.random() * 1000), 500);

setTimeout(function() {

$(firefly).fadeOut('slow', 'linear', function() {

$(firefly).remove();

});

$.move($.bug());

}, delay * 10);

return firefly;

}

$(document).ready(function() {

h = $('body').outerHeight();

w = $('body').outerWidth();

fireflies();

for (var i = 0; i < 300; i++) {

$.star();

}

$(window).resize(function() {

h = $('body').outerHeight();

w = $('body').outerWidth();

var s = $('s').first().clone();

$('s').remove();

$('#sky').append(s);

for (var i = 0; i < 300; i++) {

$.star();

}

});

});

function fireflies() {

for (var i = 0; i < 20; i++) {

var delay = Math.max(Math.round(Math.random() * 1000), 500);

setTimeout(function() {

$.move($.bug());

}, delay * 2);

}

}

html萤火虫特效代码,HTML5夜空中的萤火虫相关推荐

  1. HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情

    正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...

  2. html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法

    概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...

  3. 网站图片定位代码html5,CSS中背景图片的定位

    在CSS中,背景图片的定位方位有3种: (1)关键字:background-position: top right; (2)像素:background-position: 0px 0px; (3)百分 ...

  4. html萤火虫特效代码,原生JS实现萤火虫效果

    本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下 上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...

  5. 心电图特效代码 html5,用canvas画心电图的示例代码

    本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: ?1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) ? 模拟点时注意的点就是高起部分需 ...

  6. html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】

    html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...

  7. html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...

    html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...

  8. html 萤火虫特效,html5关在杯子里萤火虫动画特效

    特效描述:html5 萤火虫动画特效.html5关在杯子里跟随鼠标摇晃的萤火虫发光动画特效. 代码结构 1. 引入JS 2. HTML代码 var numP = 50; TweenMax.set(&q ...

  9. jquery实现app开发闹钟功能_jquery+html5时钟特效代码共享(可设置闹钟并且语音提醒)...

    本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效.共享给大家供大家参考.详细如下: 这是一个使用Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟 ...

最新文章

  1. 从将机器学习模型转化成真正产品和服务中学到的经验教训
  2. 量子信息技术研究现状与未来
  3. ASP.NET Master Page
  4. python: line=f.readlines() 后如何消除line中的’\n’
  5. 优化JVM参数提升Eclipse运行速度
  6. JavaScript数据迭代方法差别
  7. 文献阅读课13-DSGAN: Generative Adversarial Training for (远程监督关系抽取,句子级去噪)
  8. JS DOM事件(常用消息、常用事件、addEventListener、removeEventListener)
  9. leetcode - 155. 最小栈
  10. 录制完脚本怎么做接口自动化测试_快速构建轻量级接口自动化框架
  11. pip清华源安装Tensorflow-gpu
  12. 95-38-055-Buffer-UnpooledDirectByteBuf
  13. (双硬盘(SSD+HDD)/单硬盘)双系统win10+ubuntu18.04安装记录
  14. 信创办公--基于WPS的Word最佳实践系列(修改标题样式快速实现章前分页效果)
  15. mysql函数百分比_mysql window函数计算百分比
  16. u盘插上显示计算机限制,U盘插到电脑上不显示图标的解决方法(以金士顿8GU盘为例)...
  17. 运用GoogleSketchUp创作城市雕塑
  18. python中from import_Python中的import和from import
  19. 用什么词典可以翻译php,PHP调用有道词典翻译API实现通译功能及代码
  20. SCIgen与野鸡期刊的梗

热门文章

  1. 省力省钱不停机!买套餐不如搭建物联卡流量池!
  2. phpstudy搭建php项目
  3. 鬼 谷 子 --常读之
  4. Windows客户端开发简介(一)
  5. 爆笑中的商业哲理:怎么娶比尔·盖次的女儿!
  6. ddr3ddr4 lpddr4速率_众多超极本依旧采用的LPDDR3内存跟DDR4内存性能差多少?
  7. C++Primer课后题11.0、11.31
  8. 人工智能ChatGPT 体验案例:使用ChatGPT实现java扫雷小游戏
  9. 光流金字塔 matlab,【matlab】光流法
  10. this.Invoke(形参1,形参2);的用法