// 鼠标移动出现雪花.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
(function snowflakeCursor() { var possibleEmoji = ["️"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {
x: width / 2,
y: width / 2
};
var particles = []; function init() {
bindEvents();
loop();
} // Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove); window.addEventListener('resize', onWindowResize);
} function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
} function onTouchMove(e) {
if (e.touches.length > 0) {
for (var i = 0; i < e.touches.length; i++) {
addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]);
}
}
} function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY; addParticle(cursor.x, cursor.y, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]);
} function addParticle(x, y, character) {
var particle = new Particle();
particle.init(x, y, character);
particles.push(particle);
} function updateParticles() { // Updated
for (var i = 0; i < particles.length; i++) {
particles[i].update();
} // Remove dead particles
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
} } function loop() {
requestAnimationFrame(loop);
updateParticles();
} /**
* Particles
*/ function Particle() { this.initialStyles = {
"position": "absolute",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "16px",
"will-change": "transform"
}; // Init, and set properties
this.init = function(x, y, character) { this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: (1 + Math.random())
}; this.lifeSpan = 120 + Math.floor(Math.random() * 60); //ms this.position = {
x: x - 20,
y: y - 20
}; this.element = document.createElement('span');
this.element.innerHTML = character;
applyProperties(this.element, this.initialStyles);
this.update(); document.body.appendChild(this.element);
}; this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y; this.velocity.x += (Math.random() < 0.5 ? -1 : 1) * 2 / 75;
this.velocity.y -= Math.random() / 400; this.lifeSpan--; this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 180) + ") rotate(" + (2 * this.lifeSpan) + "deg)"; } this.die = function() {
this.element.parentNode.removeChild(this.element);
} } /**
* Utils
*/ // Applies css `properties` to an element.
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
} init();
})();
</script>
</body>
</html>

鼠标移动出现雪花-js实现的更多相关文章

  1. 鼠标选择文字事件js代码,增加层问题

    在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息<script type="text/javascript"& ...

  2. HTML鼠标悬浮显示隐藏 JS方法

    CSS样式表: @charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; top:200px; left ...

  3. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  4. JS实现鼠标移入水波效果

    前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...

  5. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  6. KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...

  7. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  8. 【工具相关】web-HTML/CSS/JS Prettify的使用

    一,打开Sublime Text,代码如下面所示. 二,鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示,明显的代码变得整齐了.

  9. JS 常用库汇总收集

    本文不定期更新, 用于汇总记录一些看着 ok 的 JS 库. 库名 简介 项目地址 macy.js 仅 4 kb的 原生 流布局插件 http://macyjs.com/ Driver.js 仅 4 ...

  10. js相关禁止

    遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的.但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右 ...

随机推荐

  1. 【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)?

    问题描述 App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)? 问题回答 App Service在Windows的环境中 ...

  2. 用几张图实战讲解MySQL主从复制

    本文分享自华为云社区<结合实战,我为MySQL主从复制总结了几张图!>,作者: 冰 河. MySQL官方文档 MySQL 主从复制官方文档链接地址如下所示: http://dev.mysq ...

  3. think about 和 think of 区别

    about 是 on by out 简称 about 在旁边 在外围 周边 think about you 想你有关的事 of 是 belong to 什么什么的 of指的是 这个人或者这个事本身相关 ...

  4. debian卡顿,造成用户注销现象的原因以及解决方法

    现象:当时电脑正在运行,宝塔面板安装初始化应用,一个浏览器,一个虚拟机 解决方法:目前还不清楚--是不是负载过大?好奇怪!

  5. BES2500开发板介绍和入门

    一 前记 BES2500是恒玄科技推出的款高端的TWS耳机芯片,该芯片的性能非常强悍.蓝牙5.2双模,1.8M的SRAM空间,ARM-M33的主核,绝对是音频耳机芯片中的高配,性能不是一般的强.该芯片 ...

  6. 手爱图仕Aputure MC RGB摄影补光灯体验测评

    前记  作为一个智能硬件设备狂兼智能硬件方案提供商,工作就是和各种智能硬件打交道.最近无意入手了一个爱图仕Aputure MC RGB摄影补光灯.顺便体验了几天,既然体验了,肯定要写一个体验结果的.这 ...

  7. python学习笔记(2): 函数式编程

    函数式编程 高阶函数 map() map接受一个函数和一个可迭代对象(Iterable),返回一个map对象(Iterator) def f(x): return x*x list(map(f, [1 ...

  8. [noip2015]运输计划(LCA,二分)

    运输计划[做题笔记] 挺难绷的... 题意 概括:给定 \(n\) 个节点的树和 \(n-1\) 条边的权值,现在可以将一条边的权值改为 \(0\) .找出一条边,使得将这条边权值赋为 \(0\) 时 ...

  9. 使用 NVIDIA CloudXR 从 Google Cloud 流式传输 VR 和 AR 内容

    过去,与 VR 交互需要专用的高端工作站,以及(取决于头显).壁挂式传感器和专用物理空间.VR 中的复杂任务可能会突破传感器范围.电缆长度和空间边界的限制,使艺术家陷入困境并限制他们的行动.该解决方案 ...

  10. 记录--js小练习(弹幕、 电梯导航、 倒计时、 随机点名、 购物放大镜)

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 DOM小练习 弹幕 电梯导航 倒计时 随机点名 购物放大镜 1.弹幕 效果预览 功能:输入弹幕内容,按下回车显示一条弹幕(弹幕颜色.字体随 ...