<!DOCTYPE html>

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <title>Document</title>

     </head>

 <body>

     <script type="text/javascript">

         !function() {

            function o(w, v, i) {

                return w.getAttribute(v) || i

            }

            function j(i) {

                return document.getElementsByTagName(i)

            }

            function l() {

                var i = j("script"),

                w = i.length,

                v = i[w - 1];

                return {

                    l: w,

                    z: o(v, "zIndex", -1),

                    o: o(v, "opacity", 0.5),

                    c: o(v, "color", "0,0,0"),

                    n: o(v, "count", 99)

                }

            }

            function k() {

                r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

                n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            }

            function b() {

                e.clearRect(0, 0, r, n);

                var w = [f].concat(t);

                var x, v, A, B, z, y;

                t.forEach(function(i) {

                    i.x += i.xa,

                    i.y += i.ya,

                    i.xa *= i.x > r || i.x < 0 ? -1 : 1,

                    i.ya *= i.y > n || i.y < 0 ? -1 : 1,

                    e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);

                    for (v = 0; v < w.length; v++) {

                        x = w[v];

                        if (i !== x && null !== x.x && null !== x.y) {

                            B = i.x - x.x,

                            z = i.y - x.y,

                            y = B * B + z * z;

                            y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())

                        }

                    }

                    w.splice(w.indexOf(i), 1)

                }),

                m(b)

            }

            var u = document.createElement("canvas"),

            s = l(),

            c = "c_n" + s.l,

            e = u.getContext("2d"),

            r,

            n,

            m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

            function(i) {

                window.setTimeout(i, 1000 / 45)

            },

            a = Math.random,

            f = {

                x: null,

                y: null,

                max: 20000

            };

            u.id = c;

            u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;

            j("body")[0].appendChild(u);

            k(),

            window.onresize = k;

            window.onmousemove = function(i) {

                i = i || window.event,

                f.x = i.clientX,

                f.y = i.clientY

            },

            window.onmouseout = function() {

                f.x = null,

                f.y = null

            };

            for (var t = [], p = 0; s.n > p; p++) {

                var h = a() * r,

                g = a() * n,

                q = 2 * a() - 1,

                d = 2 * a() - 1;

                t.push({

                    x: h,

                    y: g,

                    xa: q,

                    ya: d,

                    max: 6000

                })

            }

            setTimeout(function() {

                b()

            }, 100)

    } ();

     </script>

 </body>

</html>

有趣的js(鼠标特效)的更多相关文章

  1. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  5. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  6. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  7. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  8. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

  9. javascript实例——鼠标特效篇(包含2个实例)

    鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小. ...

随机推荐

  1. shell实现大批量word转码然后分析相关字段

    需求 需要从服务器中的所有附件(2013-2019) 共60G查找相关字段 在linux上面直接打开doc等是乱码的 思路 先全部附件转码为txt, 然后用grep遍历查找字段实现 转码shell # ...

  2. 关于Hibernate 连接mysql不能自动建表的问题

    最近看旧书,李刚那本<轻量级J2EE>在讲解hibernate的时候遇到一个问题,就是与mysql连接后,明明配置了自动建表,却老是建不了表,上网查了发现是方言的原因,到底什么是方言?这里 ...

  3. ReentrantLock源码

    ReentrantLock与Synchronized区别在于后者是JVM实现,前者是JDK实现,属于Java对象,使用的时候必须有明确的加锁(Lock)和解锁(Release)方法,否则可能会造成死锁 ...

  4. iOS SDWebImage知识点

    1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...

  5. Java之二分查找算法

    算法说明:取中间位置的值与待查字比较.如果比待查字更大,则去列表的前半部分查找,如果比待查字小,则去列表的后半部分查找,直到找到这个待查字,或者返回没有找到这个待查字.其中给定的列表是从大到小排列的有 ...

  6. Linux机器学习软件配置

    如果需要安装Python+anaconda+pycharm,就不需要单独安装Python了,因为anaconda自带Python https://www.twblogs.net/a/5b7f8c742 ...

  7. 【搬运工】redis 启动和关闭

    如果是用apt-get或者yum install安装的redis,可以直接通过下面的命令停止/启动/重启redis /etc/init.d/redis-server stop /etc/init.d/ ...

  8. Poj2018 Best Cow Fences

    传送门 题目大意就是给定一个长度为 n 的正整数序列 A ,求一个平均数最大的,长度不小于 L 的子序列. 思路: 二分答案. Code: #include<iostream> #incl ...

  9. Android人脸识别Demo竖屏YUV方向调整和图片保存

    本博客包含三个常用方法,用于盛开Android版人脸识别Demo中竖屏使用时送入yuv数据,但一直无法识别的情况. 1.首先可以尝试顺时针旋转90°或270°,然后送入识别SDK. 2.旋转方向后依然 ...

  10. java动态代理实现与原理详细分析（代码层面解释了AOP的实现）

    关于Java中的动态代理,我们首先需要了解的是一种常用的设计模式--代理模式,而对于代理,根据创建代理类的时间点,又可以分为静态代理和动态代理. 一.代理模式    代理模式是常用的java设计模式, ...