首页 > 其他分享 >JS 鼠标粒子效果

JS 鼠标粒子效果

时间:2023-05-23 15:22:39浏览次数:31  
标签:function document 粒子 鼠标 max JS window var null

<!--鼠标粒子特效-->
<script>
    !function() {
        function n(n, e, t) {
            return n.getAttribute(e) || t
        }
        function e(n) {
            return document.getElementsByTagName(n)
        }
        function t() {
            var t = e("script"),
            o = t.length,
            i = t[o - 1];
            return {
                l: o,
                z: n(i, "zIndex", -1),
                o: n(i, "opacity", .5),
                c: n(i, "color", "0,0,0"),
                n: n(i, "count", 99)
            }
        }
        function o() {
            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
        function i() {
            r.clearRect(0, 0, a, c);
            var n, e, t, o, m, l;
            s.forEach(function(i, x) {
                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
                null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,
                l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
            }),
            x(i)
        }
        var a, c, u, m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(n) {
            window.setTimeout(n, 1e3 / 45)
        },
        w = Math.random,
        y = {
            x: null,
            y: null,
            max: 2e4
        };
        m.id = l,
        m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
        e("body")[0].appendChild(m),
        o(),
        window.onresize = o,
        window.onmousemove = function(n) {
            n = n || window.event,
            y.x = n.clientX,
            y.y = n.clientY
        },
        window.onmouseout = function() {
            y.x = null,
            y.y = null
        };
        for (var s = [], f = 0; d.n > f; f++) {
            var h = w() * a,
            g = w() * c,
            v = 2 * w() - 1,
            p = 2 * w() - 1;
            s.push({
                x: h,
                y: g,
                xa: v,
                ya: p,
                max: 6e3
            })
        }
        u = s.concat([y]),
        setTimeout(function() { i();  }, 100)
    } ();
</script>

效果如如下:

 

标签:function,document,粒子,鼠标,max,JS,window,var,null
From: https://www.cnblogs.com/lwk9527/p/17425312.html

相关文章

  • js导入excel&导出excel
    js导入excel&导出excel Excel导入html代码<buttonstyle={{color:'#1890ff',fontSize:'14px',cursor:'pointer'}}onClick={()=>{upFile();}}>导入</button><inputid="upFile"type="fil......
  • rails 前后端数据传递hash to json
    controller.rb@data={a:1,b:2}@data_new={"a":1,"b":2}index.htmlvararr=<%=@data%>#=>{:a=>1,:b=>2}vararr=<%=raw@data%>#=>arr={:a=>1,:b=>2}vararr=<%=raw@data_......
  • SpringMVC响应json数据
    SpringMvc响应json数据@Controller@RequestMapping("/json")publicclassJsonController{@RequestMapping("/js1")@ResponseBody//响应json:将return的值作为文本响应给客户端,而不是转发到对应页面publicStringjs1(){System.out.println("js......
  • Js获取当前是本年度第几周、周开始日期结束日期
    js获取今年第几周和获取周的开始和结束日期获取今年第几周周的开始和结束日期 获取今年第几周//页面初始时获取当前是本年第几周functiongetYearWeek(a,b,c){//a为年b为月c为日/*date1是当前日期date2是当年第一天......
  • vueh5实现双指操作图片或者内容放大缩小拖动 (hammerjs插件)
    可在mounted钩子直接使用通过使用Hammer.js库来实现手势操作,包括缩放、拖动和双击重置功能1.在模板中添加了一个<div>元素,并为其设置了ref属性,以便在代码中引用该元素。2.在mounted生命周期钩子函数中,通过this.$refs.main获取之前设置的<div>元素。3.创建了一个新的Hammer实例,传入......
  • js 关于 replace 取值、替换第几个匹配项
    〇、前言在日常开发中,经常遇到针对字符串的替换、截取,知识点比较碎容易混淆,特此总结一下,仅供参考。一、替换第一个匹配项字符串替换letstrtest="0123测试replace456测试replace789测试replace0"console.log("原字符串:"+strtest)letoutstr=strtest.replace("测试","c......
  • map判断是否存在某个key,以及遍历jsonobject
    if(filter.containsKey("nodeData")){JSONObjectjsonObject=(JSONObject)filter.get("nodeData");Iteratoriterator=jsonObject.keySet().iterator();while(iterator.hasNext()){Stri......
  • js 连接数据库 提示:ActiveXObject is not defined
    ActiveXObjectisnotdefined最近比较闲,上班瞎捣鼓一下,没想到报错了,提示ActiveXObjectisnotdefined大概是在js连接数据库时new对象使用的是ActiveXObject完事儿使用的浏览器是edge,但是在ie就没有问题,那么估计就是浏览器的设置问题点开edge的设置然后在默认浏览器的侧栏......
  • JS中的undefined 与 null
    在JavaScript中,undefined和null是两个特殊的值,用于表示缺失或空值。undefined是一个表示未定义或未赋值的原始值。它在以下情况下使用:1.变量声明了但未初始化时,默认为undefined。letx;console.log(x);//undefined  2.访问对象属性或数组元素时,如果该......
  • 读取数据库JSON格式数据信息处理办法记录
    遇到的问题:现有代码如下defListQuery(self):sql01="SELECTcontentFROMzt_user_customdata\WHERErealname='alarm-server'ANDaccount='alarm-server'"result01=self.CommonQueryFunc(sql01)result02=str(resu......