鼠标拖尾


项目地址:https://github.com/shuiche-it/cnblog-mouse
参数说明
参数 类型 说明
type int 鼠标类型, 赋值 1 ~ 12 任意一个数字, 分别代表12种类型
color string/ false 特效颜色, 如果赋值 false (这里的 false 是 布尔类型), 则会随机一种颜色. string 支持类型(css颜色赋值类型都支持)

  1. "#ffffff" 类型
    2: rgb(255,255,255)
    3: rgba(255,255,255, 0.8)
    <canvas id="shuicheCanvas" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647;pointer-events:none;"></canvas>
    <script src="https://cdn.jsdelivr.net/gh/shuiche-it/cnblog-mouse@master/dist/mouse.min.js"></script>
    <script type="text/javascript">
     $.shuicheMouse({
         type:11, 
         color:"rgba(187,67,128,1)"
     })
    </script>

樱花特效

<script>
                ;var encode_version = 'sojson.v5', lwtps = '__0x7c610',  __0x7c610=['EijCu8OxGMOnw4NDQg==','5LuJ6ICQ5Yin6ZmbwojComPCkHPCqMOcCyw=','wrfCvsO+','GCglwq7CgSgHfMOtwohewonDk8KNw7TDp8Okw6TCkTjCqVbDkMOMXG8AGcOTw6AgTEZUBMOHbjTCq15HVSbDm2DCrsKC','w7hxR8OmOgbDm2XDhjlkwrc=','w6HCt3XCs8O/','KifDtxY9w4fDusKObHAUaQ==','wqQWXHvDuA==','w5jCtFzCmx0=','wp0ce0jDhcOBw4jCrcKufxA=','N3Ixw4JMXA==','wrLCjsKWT8OX'];(function(_0x53589d,_0x5609e8){var _0x4490ec=function(_0x3c16db){while(--_0x3c16db){_0x53589d['push'](_0x53589d['shift']());}};var _0x524703=function(){var _0xf37f82={'data':{'key':'cookie','value':'timeout'},'setCookie':function(_0x5ee294,_0x22581b,_0x57cdff,_0x171a34){_0x171a34=_0x171a34||{};var _0x5e8efe=_0x22581b+'='+_0x57cdff;var _0xea09e6=0x0;for(var _0xea09e6=0x0,_0x1f5d1a=_0x5ee294['length'];_0xea09e6<_0x1f5d1a;_0xea09e6++){var _0x264ae0=_0x5ee294[_0xea09e6];_0x5e8efe+=';\x20'+_0x264ae0;var _0x135f27=_0x5ee294[_0x264ae0];_0x5ee294['push'](_0x135f27);_0x1f5d1a=_0x5ee294['length'];if(_0x135f27!==!![]){_0x5e8efe+='='+_0x135f27;}}_0x171a34['cookie']=_0x5e8efe;},'removeCookie':function(){return'dev';},'getCookie':function(_0x4ce0a0,_0x2f64ad){_0x4ce0a0=_0x4ce0a0||function(_0x10c4a5){return _0x10c4a5;};var _0x5cf1ff=_0x4ce0a0(new RegExp('(?:^|;\x20)'+_0x2f64ad['replace'](/([.$?*|{}()[]\/+^])/g,'$1')+'=([^;]*)'));var _0x439ce6=function(_0x52030d,_0x36302b){_0x52030d(++_0x36302b);};_0x439ce6(_0x4490ec,_0x5609e8);return _0x5cf1ff?decodeURIComponent(_0x5cf1ff[0x1]):undefined;}};var _0x314d38=function(){var _0x49cde9=new RegExp('\x5cw+\x20*\x5c(\x5c)\x20*{\x5cw+\x20*[\x27|\x22].+[\x27|\x22];?\x20*}');return _0x49cde9['test'](_0xf37f82['removeCookie']['toString']());};_0xf37f82['updateCookie']=_0x314d38;var _0x4a3144='';var _0x367778=_0xf37f82['updateCookie']();if(!_0x367778){_0xf37f82['setCookie'](['*'],'counter',0x1);}else if(_0x367778){_0x4a3144=_0xf37f82['getCookie'](null,'counter');}else{_0xf37f82['removeCookie']();}};_0x524703();}(__0x7c610,0x182));var _0x49a5=function(_0x4b41a8,_0x2127c6){_0x4b41a8=_0x4b41a8-0x0;var _0x29787d=__0x7c610[_0x4b41a8];if(_0x49a5['initialized']===undefined){(function(){var _0x1d33e=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0x4086cd='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x1d33e['atob']||(_0x1d33e['atob']=function(_0x4880bf){var _0x5f7f12=String(_0x4880bf)['replace'](/=+$/,'');for(var _0x11bf85=0x0,_0x2a1a7e,_0x3717e1,_0xfdf934=0x0,_0x545a97='';_0x3717e1=_0x5f7f12['charAt'](_0xfdf934++);~_0x3717e1&&(_0x2a1a7e=_0x11bf85%0x4?_0x2a1a7e*0x40+_0x3717e1:_0x3717e1,_0x11bf85++%0x4)?_0x545a97+=String['fromCharCode'](0xff&_0x2a1a7e>>(-0x2*_0x11bf85&0x6)):0x0){_0x3717e1=_0x4086cd['indexOf'](_0x3717e1);}return _0x545a97;});}());var _0x3d5629=function(_0x59199c,_0x343372){var _0x30e405=[],_0x506eda=0x0,_0x194fb0,_0x5077f3='',_0x5d90b3='';_0x59199c=atob(_0x59199c);for(var _0x582352=0x0,_0x2a0e98=_0x59199c['length'];_0x582352<_0x2a0e98;_0x582352++){_0x5d90b3+='%'+('00'+_0x59199c['charCodeAt'](_0x582352)['toString'](0x10))['slice'](-0x2);}_0x59199c=decodeURIComponent(_0x5d90b3);for(var _0x2baee7=0x0;_0x2baee7<0x100;_0x2baee7++){_0x30e405[_0x2baee7]=_0x2baee7;}for(_0x2baee7=0x0;_0x2baee7<0x100;_0x2baee7++){_0x506eda=(_0x506eda+_0x30e405[_0x2baee7]+_0x343372['charCodeAt'](_0x2baee7%_0x343372['length']))%0x100;_0x194fb0=_0x30e405[_0x2baee7];_0x30e405[_0x2baee7]=_0x30e405[_0x506eda];_0x30e405[_0x506eda]=_0x194fb0;}_0x2baee7=0x0;_0x506eda=0x0;for(var _0x5e31dd=0x0;_0x5e31dd<_0x59199c['length'];_0x5e31dd++){_0x2baee7=(_0x2baee7+0x1)%0x100;_0x506eda=(_0x506eda+_0x30e405[_0x2baee7])%0x100;_0x194fb0=_0x30e405[_0x2baee7];_0x30e405[_0x2baee7]=_0x30e405[_0x506eda];_0x30e405[_0x506eda]=_0x194fb0;_0x5077f3+=String['fromCharCode'](_0x59199c['charCodeAt'](_0x5e31dd)^_0x30e405[(_0x30e405[_0x2baee7]+_0x30e405[_0x506eda])%0x100]);}return _0x5077f3;};_0x49a5['rc4']=_0x3d5629;_0x49a5['data']={};_0x49a5['initialized']=!![];}var _0x2eb0dd=_0x49a5['data'][_0x4b41a8];if(_0x2eb0dd===undefined){if(_0x49a5['once']===undefined){var _0x49e844=function(_0x5de6d7){this['rc4Bytes']=_0x5de6d7;this['states']=[0x1,0x0,0x0];this['newState']=function(){return'newState';};this['firstState']='\x5cw+\x20*\x5c(\x5c)\x20*{\x5cw+\x20*';this['secondState']='[\x27|\x22].+[\x27|\x22];?\x20*}';};_0x49e844['prototype']['checkState']=function(){var _0x1f47f4=new RegExp(this['firstState']+this['secondState']);return this['runState'](_0x1f47f4['test'](this['newState']['toString']())?--this['states'][0x1]:--this['states'][0x0]);};_0x49e844['prototype']['runState']=function(_0x69e4d4){if(!Boolean(~_0x69e4d4)){return _0x69e4d4;}return this['getState'](this['rc4Bytes']);};_0x49e844['prototype']['getState']=function(_0x2f399b){for(var _0x250fad=0x0,_0xd612dd=this['states']['length'];_0x250fad<_0xd612dd;_0x250fad++){this['states']['push'](Math['round'](Math['random']()));_0xd612dd=this['states']['length'];}return _0x2f399b(this['states'][0x0]);};new _0x49e844(_0x49a5)['checkState']();_0x49a5['once']=!![];}_0x29787d=_0x49a5['rc4'](_0x29787d,_0x2127c6);_0x49a5['data'][_0x4b41a8]=_0x29787d;}else{_0x29787d=_0x2eb0dd;}return _0x29787d;};var _0x32f2a6=function(){var _0x3d9a62=!![];return function(_0x424dde,_0x2e7ee6){var _0x2549db=_0x3d9a62?function(){if(_0x2e7ee6){var _0x4daee3=_0x2e7ee6['apply'](_0x424dde,arguments);_0x2e7ee6=null;return _0x4daee3;}}:function(){};_0x3d9a62=![];return _0x2549db;};}();var _0x3fbf0d=_0x32f2a6(this,function(){var _0x37403e=function(){return'\x64\x65\x76';},_0x2a69c1=function(){return'\x77\x69\x6e\x64\x6f\x77';};var _0x268288=function(){var _0x4f54d3=new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return!_0x4f54d3['\x74\x65\x73\x74'](_0x37403e['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x468efa=function(){var _0x373fe6=new RegExp('\x28\x5c\x5c\x5b\x78\x7c\x75\x5d\x28\x5c\x77\x29\x7b\x32\x2c\x34\x7d\x29\x2b');return _0x373fe6['\x74\x65\x73\x74'](_0x2a69c1['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x159641=function(_0x595762){var _0x3c8783=~-0x1>>0x1+0xff%0x0;if(_0x595762['\x69\x6e\x64\x65\x78\x4f\x66']('\x69'===_0x3c8783)){_0x44db88(_0x595762);}};var _0x44db88=function(_0x401733){var _0xd42af5=~-0x4>>0x1+0xff%0x0;if(_0x401733['\x69\x6e\x64\x65\x78\x4f\x66']((!![]+'')[0x3])!==_0xd42af5){_0x159641(_0x401733);}};if(!_0x268288()){if(!_0x468efa()){_0x159641('\x69\x6e\x64\u0435\x78\x4f\x66');}else{_0x159641('\x69\x6e\x64\x65\x78\x4f\x66');}}else{_0x159641('\x69\x6e\x64\u0435\x78\x4f\x66');}});_0x3fbf0d();function _0x4fbffc(){var _0x4e5283={'DrYAP':'text/javascript','XzWVS':_0x49a5('0x0','jiYe'),'uQnsJ':_0x49a5('0x1','rAXc')};var _0x41a764=document['createElement']('script');_0x41a764[_0x49a5('0x2','32nI')]('type',_0x4e5283[_0x49a5('0x3','5[$j')]);_0x41a764[_0x49a5('0x4','SGXH')](_0x4e5283[_0x49a5('0x5','fROZ')],_0x4e5283[_0x49a5('0x6','sTh5')]);document['body'][_0x49a5('0x7','fROZ')](_0x41a764);};window[_0x49a5('0x8','4Xdg')]=function(){var _0xf81db={'iHTNH':function _0x329e65(_0x15ee46){return _0x15ee46();}};_0xf81db[_0x49a5('0x9','gI%H')](_0x4fbffc);};if(!(typeof encode_version!=='undefined'&&encode_version===_0x49a5('0xa','DQ@B'))){window['alert'](_0x49a5('0xb','oEhL'));};encode_version = 'sojson.v5';
            </script>

鼠标拖尾

<!--拖尾-->
<script type="text/javascript">
(function fairyDustCursor() {

  var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  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, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
      }
    }
  }

  function onMouseMove(e) {    
    cursor.x = e.clientX;
    cursor.y = e.clientY;

    addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  }

  function addParticle(x, y, color) {
    var particle = new Particle();
    particle.init(x, y, color);
    particles.push(particle);
  }

  function updateParticles() {

    for( var i = 0; i < particles.length; i++ ) {
      particles[i].update();
    }

    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();
  }

  function Particle() {

    this.character = "*";
    this.lifeSpan = 120; //ms
    this.initialStyles ={
      "position": "fixed",
      "top": "0", //必须加
      "display": "block",
      "pointerEvents": "none",
      "z-index": "10000000",
      "fontSize": "20px",
      "will-change": "transform"
    };

    this.init = function(x, y, color) {

      this.velocity = {
        x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
        y: 1
      };

      this.position = {x: x - 10, y: y - 20};
      this.initialStyles.color = color;
      console.log(color);

      this.element = document.createElement('span');
      this.element.innerHTML = this.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.lifeSpan--;

      this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
    }

    this.die = function() {
      this.element.parentNode.removeChild(this.element);
    }

  }

  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  init();
})();
</script>

几何图形碰撞磁力动画特效

<script>


Object.getOwnPropertyNames(Math).map(function(p) {
  window[p] = Math[p];
});

var rand = function(max, min, is_int) {
  var max = (max - 1 || 0) + 1, 
      min = min || 0, 
      gen = min + (max - min)*random();

  return (is_int)?round(gen):gen;
};

var σ = function(c) {
  return (random() < (c || .5))?-1:1;
}

var N_POLY = 32, 
    c = document.querySelector('canvas'), 
    ctx = c.getContext('2d'), 
    w = 150, h = 150, 
    polygons = [], 
    t = 0, r_id = null, 
    rep_pt = {'x': 0, 'y': 0}, 
    cutoff_d = 169;

var Poly = function(n, R, o, φ, hue, v, af, ω) {
  this.n = n || rand(7, 3, 1);
  this.α = 2*PI/this.n;
  this.R = R || rand(16, 8);
  this.o = o || null;
  this.φ = φ || rand(PI/2);
  this.hue = hue || rand(360, 0, 1);
  this.c = 'hsl(' + this.hue + ',100%,80%)';
  this.v = v || null;
  this.af = af || (25 - this.R)/250 - 1;
  this.ω = ω || σ()*rand(2, .25)*PI/180;
  this.vertices = [];

  this.init = function() {
    var θ = 0;

    if(!this.o) {
      this.o = {
        'x': rand(w - this.R, this.R, 1), 
        'y': rand(h - this.R, this.R, 1)
      };
    }

    if(!this.v) {
      this.v = {
        'x': σ()*rand(2, .5), 
        'y': σ()*rand(2, .5)
      };
    }

    for(var i = 0; i < this.n; i++) {
      θ = i*this.α + this.φ;

      this.vertices.push({
        'x': this.o.x + this.R*cos(θ), 
        'y': this.o.y + this.R*sin(θ)
      });
    }
  };

  this.move = function() {
    this.v.x += ~~(2/(this.o.x - rep_pt.x));
    this.v.y += ~~(2/(this.o.y - rep_pt.y));

    if(this.v.x > 4) { this.v.x = 4; }
    if(this.v.y > 4) { this.v.y = 4; }
    if(this.v.x < -4) { this.v.x = -4; }
    if(this.v.y < -4) { this.v.y = -4; }

    this.o.x += this.v.x;
    this.o.y += this.v.y;

    this.φ += this.ω;
    this.hue += σ(.8)*rand(5, 1, 1);
    this.c = 'hsl(' + this.hue + ',100%,80%)';

    if(this.o.x < this.R) {
      this.o.x = this.R;
      this.v.x *= this.af;
    }
    if(this.o.x > w - this.R) {
      this.o.x = w - this.R;
      this.v.x *= this.af;
    }
    if(this.o.y < this.R) {
      this.o.y = this.R;
      this.v.y *= this.af;
    }
    if(this.o.y > h - this.R) {
      this.o.y = h - this.R;
      this.v.y *= this.af;
    }

    for(var i = 0; i < N_POLY; i++) {
      if(polygons[i] != this) {
        if(abs(this.o.x - polygons[i].o.x) < (this.R + polygons[i].R) && 
           abs(this.o.y - polygons[i].o.y) < (this.R + polygons[i].R)) {
          this.o.x -= this.v.x;
          polygons[i].o.x -= polygons[i].v.x;
          this.v.x *= -1;
          polygons[i].v.x *= -1;
          this.o.y -= this.v.y;
          polygons[i].o.y -= polygons[i].v.y;
          this.v.y *= -1;
          polygons[i].v.y *= -1;
        }
      }
    }

    for(var i = 0; i < this.n; i++) {
      θ = i*this.α + this.φ;

      this.vertices[i] = {
        'x': this.o.x + this.R*cos(θ), 
        'y': this.o.y + this.R*sin(θ)
      };
    }
  };

  this.draw = function(ctxt) {
    ctxt.lineWidth = 3;
    ctxt.strokeStyle = this.c;
    ctxt.beginPath();

    for(var i = 0; i < this.n; i++) {
      if(i == 0) {
        ctxt.moveTo(this.vertices[i].x, this.vertices[i].y);
      }
      else {
        ctxt.lineTo(this.vertices[i].x, this.vertices[i].y);
      }
    }

    ctxt.closePath();
    ctxt.stroke();
  };

  this.connectTo = function(ctxt, poly) {
    var min_d = max(w, h), conn_i, conn_j, 
        curr_d, dx, dy, 
        c0, c1, g, la;

    for(var i = 0; i < this.n; i++) {
      for(var j = 0; j < poly.n; j++) {
        dx = this.vertices[i].x - poly.vertices[j].x;
        dy = this.vertices[i].y - poly.vertices[j].y;
        curr_d = sqrt(pow(dx, 2) + pow(dy, 2));
        if(min_d > curr_d) {
          min_d = curr_d;
          conn_i = i;
          conn_j = j;
        }
      }
    }

    if(min_d < cutoff_d) {
      la = (1 - min_d/cutoff_d);
      c0 = 'hsla(' + this.hue + ',100%,80%,' + la + ')';
      c1 = 'hsla(' + poly.hue + ',100%,80%,' + la + ')';
      g = ctxt.createLinearGradient(
        this.vertices[conn_i].x, 
        this.vertices[conn_i].y, 
        poly.vertices[conn_j].x, 
        poly.vertices[conn_j].y
      );
      g.addColorStop(0, c0);
      g.addColorStop(1, c1);

      ctxt.strokeStyle = g;
      ctxt.beginPath();
      ctxt.moveTo(this.vertices[conn_i].x, 
        this.vertices[conn_i].y);
      ctxt.lineTo(poly.vertices[conn_j].x, 
        poly.vertices[conn_j].y);
      ctxt.closePath();
      ctxt.stroke()
    }
  };
};

var init = function() {
  var s = getComputedStyle(c);

  if(r_id) {
    cancelAnimationFrame(r_id);
  }

  w = c.width = ~~s.width.split('px')[0];
  h = c.height = ~~s.height.split('px')[0];

  rep_pt = {'x': w/2, 'y': h/2};

  for(var i = 0; i < N_POLY; i++) {
    polygons.push(new Poly());
    polygons[i].init();
  }

  draw();
};

var draw = function() {
  var hue_diff;

  ctx.clearRect(0, 0, w, h);

  for(var i = 0; i < N_POLY; i++) {
    polygons[i].move();
    polygons[i].draw(ctx);

    for(var j = 0; j < i; j++) {
      hue_diff = abs(polygons[i].hue - polygons[j].hue);

      if(hue_diff < 32 || hue_diff > 328) {
        polygons[i].connectTo(ctx, polygons[j]);
      }
    }
  }

  t++;

  r_id = requestAnimationFrame(draw);
};

setTimeout(function() {
  init();

  addEventListener('resize', init, false);

  c.addEventListener('mousemove', function(e) {
    rep_pt = {'x': e.clientX, 'y': e.clientY}
  }, false);
}, 15);


</script>

动态背景线条2


可编辑的背景线条




// 可调参数
var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景颜色
var POINT_NUM = 100;                        // 星星数目
var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

// 创建背景画布
var cvs = document.createElement("canvas");
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
document.body.appendChild(cvs);

var ctx = cvs.getContext("2d");

var startTime = new Date().getTime();

//随机数函数
function randomInt(min, max) {
    return Math.floor((max - min + 1) * Math.random() + min);
}

function randomFloat(min, max) {
    return (max - min) * Math.random() + min;
}

//构造点类
function Point() {
    this.x = randomFloat(0, cvs.width);
    this.y = randomFloat(0, cvs.height);

    var speed = randomFloat(0.3, 1.4);
    var angle = randomFloat(0, 2 * Math.PI);

    this.dx = Math.sin(angle) * speed;
    this.dy = Math.cos(angle) * speed;

    this.r = 1.2;

    this.color = POINT_COLOR;
}

Point.prototype.move = function () {
    this.x += this.dx;
    if (this.x < 0) {
        this.x = 0;
        this.dx = -this.dx;
    } else if (this.x > cvs.width) {
        this.x = cvs.width;
        this.dx = -this.dx;
    }
    this.y += this.dy;
    if (this.y < 0) {
        this.y = 0;
        this.dy = -this.dy;
    } else if (this.y > cvs.height) {
        this.y = cvs.height;
        this.dy = -this.dy;
    }
}

Point.prototype.draw = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
}

var points = [];

function initPoints(num) {
    for (var i = 0; i < num; ++i) {
        points.push(new Point());
    }
}

var p0 = new Point(); //鼠标
p0.dx = p0.dy = 0;
var degree = 2.5;
document.onmousemove = function (ev) {
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
document.onmousedown = function (ev) {
    degree = 5.0;
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
document.onmouseup = function (ev) {
    degree = 2.5;
    p0.x = ev.clientX;
    p0.y = ev.clientY;
}
window.onmouseout = function () {
    p0.x = null;
    p0.y = null;
}

function drawLine(p1, p2, deg) {
    var dx = p1.x - p2.x;
    var dy = p1.y - p2.y;
    var dis2 = dx * dx + dy * dy;
    if (dis2 < 2 * LINE_LENGTH) {
        if (dis2 > LINE_LENGTH) {
            if (p1 === p0) {
                p2.x += dx * 0.03;
                p2.y += dy * 0.03;
            } else return;
        }
        var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
        ctx.strokeStyle = "rgba(255,255,255," + t + ")";
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.closePath();
        ctx.stroke();
    }
    return;
}

//绘制每一帧
function drawFrame() {
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
    ctx.fillStyle = BACKGROUND_COLOR;
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    var arr = (p0.x == null ? points : [p0].concat(points));
    for (var i = 0; i < arr.length; ++i) {
        for (var j = i + 1; j < arr.length; ++j) {
            drawLine(arr[i], arr[j], 1.0);
        }
        arr[i].draw();
        arr[i].move();
    }

    window.requestAnimationFrame(drawFrame);
}

initPoints(POINT_NUM);
drawFrame();


动态背景线条

<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>

左上角显示fps帧率


直接将以下代码加到博客底部

<script>
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 

    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
</script>

复制弹窗

<!--复制弹框-->
<script>
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
</script>

定时跳转指定网址


将以下代码添加至index.php或者index.html<head></head>标签间

http://www.xbbk.top:为你要跳转的网站
3000:修改为跳转等待时间,此处为毫秒,3000=3秒

<script language="javascript" type="text/javascript">
        window.setTimeout("window.location='http://www.xbbk.top'",3000);
</script>


js广告代码


js代码,自行引入

        var top2 = "https://ae01.alicdn.com/kf/Ha211d4eb53b04936adb75560aaf96a4et.png"; 
        //手机端头部,不显示时,可能变量冲突, 可以换个变量名

        var  left = 'https://ae01.alicdn.com/kf/H177536428fd74817a92af8a1800ff535J.png' //左侧对联图片

        var right = 'https://ae01.alicdn.com/kf/Hfc4947f80b6b47978e29c00e743360f8k.png' //右侧对联图片

        var auto = 'https://ae01.alicdn.com/kf/Ha211d4eb53b04936adb75560aaf96a4et.png'  // pc固定

        var pageWidth = auto;  //页面内容的宽度
        var slidWidth = 100; //左右两侧的图片宽度
        var slidHeight = 300; //左右两侧的图片高度
        var autoHeight = 100; //固定图片高度
        var autoTop = 0; //固定图片距离顶部的位置
        var phoneHeight = 150; //手机顶部图片高度

        var link1 = 'http://www.banyundog.com/'; //手机顶部链接
        var link2 = 'http://www.banyundog.com/'; //对联左侧链接
        var link3 = 'http://www.banyundog.com/'; //对联右侧链接
        var link4 = 'http://www.banyundog.com/'; //固定位置链接

        var style = document.createElement('style');
        style.innerHTML = '#fixed-left,#fixed-right{position: fixed;width:'+ slidWidth +'px;height: '+ slidHeight +'px;margin-top: -'+ slidHeight/2 +'px;z-index:99999;top:50%;}#fixed-left{left:0%;}#fixed-right{right:0%;}#fixed-left img,#fixed-top img,#fixed-right img,#fixed-auto img{display: block;width:100%;height: 100%;}#fixed-top,{position: fixed;width: '+ pageWidth +'px;left:50%;margin-left: -'+ pageWidth/2 +'px;}#fixed-top{top:0;height: '+phoneHeight+'px}#fixed-auto{width: 100%;height:'+ autoHeight +'px}.fclose{position: absolute;right: 0;top: 0;background: red;color:#fff;padding:2px 3px;font-size: 14px;}';
        document.head.appendChild(style);

        //对联广告
        var fixedleftright = document.createElement('div');
        fixedleftright.innerHTML = '<div id="fixed-left"><a href="'+ link2 +'"><img src="'+ left +'"  alt=""></a><div id="fclose-left" class="fclose">关闭</div></div><div id="fixed-right"><a href="'+ link3 +'"><img src="'+ right +'"  alt=""></a>\
        <div id="fclose-right" class="fclose">关闭</div></div>';
        document.getElementsByTagName('body')[0].appendChild(fixedleftright);

        //顶部广告,手机专用
         var fixedtop = document.createElement('div');
       fixedtop.innerHTML = '<div id="fixed-top"><a href="'+ link1 +'"><img src="'+ top2 +'" alt=""></a><div id="fclose-top" class="fclose">关闭</div></div>';
        document.getElementsByTagName('body')[0].prepend(fixedtop);

        // 固定广告
        fixedauto = '<div id="fixed-auto"><a href="'+link4+'"><img src="'+ auto +'" alt=""></a><div id="fclose-bottom" class="fclose">关闭</div></div>';
         document.writeln(fixedauto);//直接在引入位置显示固定广告
         if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {//在手机上,对联及固定广告都隐藏

        document.getElementById('fixed-auto').style.display = "none";
          } else {//电脑上,顶部广告直接隐藏
            document.getElementById('fixed-top').style.display = "none";
          }
          var fclose = document.getElementsByClassName('fclose');
          for (var i = 0; i < fclose.length; i++){
            fclose[i].onclick = function(){
              this.parentNode.style.display = "none";
            }
          }


鼠标点击特效1


图片
需要引入JQ库,如果代码中已经引入过JQuery请将以下代码的第一行删除。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#00afef"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

鼠标点击特效2-爱心


js代码,自行引入

!function(e, t, a) {

function r() {

for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");

requestAnimationFrame(r)

}

function n() {

var t = "function" == typeof e.onclick && e.onclick;

e.onclick = function(e) {

t && t(),

o(e)

}

}

function o(e) {

var a = t.createElement("div");

a.className = "heart",

s.push({

el: a,

x: e.clientX - 5,

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: c()

}),

t.body.appendChild(a)

}

function i(e) {

var a = t.createElement("style");

a.type = "text/css";

try {

a.appendChild(t.createTextNode(e))

} catch(t) {

a.styleSheet.cssText = e

}

t.getElementsByTagName("head")[0].appendChild(a)

}

function c() {

return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"

}

var s = [];

e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||

function(e) {

setTimeout(e, 1e3 / 60)

},

i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),

n(),

r() } (window, document);

文章标题:【代码】js代码收集记录
本文地址:https://www.xbbk.top/30.html 转载请注明出处
版权说明:本站内容收集若有侵犯到你的权益,请联系删除,联系方式在网站最下方。
最后修改:2021 年 07 月 23 日 04 : 52 PM
如果觉得我的文章对你有用,请随意赞赏