// 鼠标移动出现雪花.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. 前后端分离项目(七):实现"添加"功能(前端视图)

    好家伙,本篇用于测试"添加"接口,为后续"用户注册"功能做铺垫   (完整代码在最后) 我们要实现"添加"功能 老样子我们先来理清一下思路, ...

  2. JAVA对象生命周期（三）-对象的销毁

    目录 从引用说起 指针直接引用 句柄引用 优缺点 如何判断对象死亡 引用计数法 可达性分析法 垃圾收集算法 标记-清除算法 复制算法 复制算法--优化 有关年轻代的JVM参数 标记-整理算法 分代收集 ...

  3. 【Azure 云服务】指标哪去了？在执行 Swap (交换生产部署和Staging部署) 操作后看不见云服务的旧指标

    问题描述 打开云服务(Cloud Service)的Metrics页面,发现过去了指标不见了? 以虚点构成无数据的图表. 问题解答 查看云服务的活动日志(Activity Logs),发现最近执行的操 ...

  4. Binlog分析利器-binlog_summary.py

    ​Binlog中,除了具体的SQL,其实,还包含了很多有价值的信息,如, 事务的开始时间. 事务的结束时间. 事务的开始位置点. 事务的结束位置点. 操作的开始时间(一个事务通常会包含多个操作). 表 ...

  5. vue使用cordova的大坑！！

    额,前段时间用 cordova 包了个 vue 项目,跑真机,完美.跑公司安卓系统虚拟机,垮. 原因找了很久,最后发现是路由的问题,使用了 createWebHistory ,去掉了 hash ,虽然 ...

  6. spingboot打造教育平台（谷粒学院课程笔记）

    第一单fqb  申明,项目的框架技术架构,前端运行时node   后端框架spring  开发前准备:mysbatis官网随时看文档,IDEa 202编释器2  环境配置,idea配置一下mavem路 ...

  7. 基于RocketMQ实现分布式事务(半消息事务)

    一.背景 RocketMQ的分布式事务可以称为"半消息事务". 二.原理 2.1原理 RocketMQ是靠半消息机制实现分布式事务: 事务消息:MQ 提供类似 X/Open XA ...

  8. C#使用Stateless和箭头控件实现状态机的控制及显示

    之前开发一个小工具,内部实现一个状态机,并显示状态机当前状态及状态间的转移过程.我使用了Stateless开源类库及一个开源自定义箭头控件.自定义箭头控件是HZHControls其中一个控件,我单独把 ...

  9. stm32读写sd卡代码解析和调试总结

    一 前言   做程序员真是来不得半点偷懒,假如你对经常使用的代码不熟悉,早晚会让你付出沉重的代价.像认识自己的灵魂一样认识每行用到的代码,这才是一个合格的程序员,才不至于在出现问题的时候出现慌乱.   ...

  10. Dialog源码分析

    目录介绍 1.简单用法 2.AlertDialog源码分析 2.1 AlertDialog.Builder的构造方法 2.2 通过AlertDialog.Builder对象设置属性 2.3 build ...