Code666 (代码贴、代码片段)

[JavaScript] JS打造的跟随鼠标移动的小星星组成的图案 →→→→→进入此内容的聊天室

来自 , 2020-05-26, 写在 JavaScript, 查看 95 次.
URL http://www.code666.cn/view/40dba662
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <title>JS打造的跟随鼠标移动的小星星组成的图案丨芯晴网页特效丨CsrCode.Cn</title>
  5.     <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6.     <style type="text/css">
  7.     html{
  8.     overflow:hidden;
  9.     }
  10.     body{
  11.     position:absolute;
  12.     height:100%;
  13.     width:100%;
  14.     margin:0;
  15.     padding:0;
  16.     }
  17.     #screen{
  18.     background:#000;
  19.     position:absolute;
  20.     width:100%;
  21.     height:100%;
  22.     }
  23.     #screen span{
  24.     background:#fff;
  25.     font-size:0;
  26.     overflow:hidden;
  27.     width:2px;
  28.     height:2px;
  29.     }
  30.     </style>
  31.     <script type="text/javascript">
  32.     var Follow = function () {
  33.     var $ = function (i) {return document.getElementById(i)},
  34.     addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
  35.     OBJ = [], sp, rs, N = 0, m;
  36.     var init = function (id, config) {
  37.     this.config = config || {};
  38.     this.obj = $(id);
  39.     sp = this.config.speed || 4;
  40.     rs = this.config.animR || 1;
  41.     m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
  42.     this.setXY();
  43.     this.start();
  44.     }
  45.     init.prototype = {
  46.     setXY : function () {
  47.     var _this = this;
  48.     addEvent(this.obj, 'mousemove', function (e) {
  49.     e = e || window.event;
  50.     m.x = e.clientX;
  51.     m.y = e.clientY;
  52.     })
  53.     },
  54.     start : function () {
  55.     var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
  56.     OBJ[N++] = OO = new CObj(null, 0, 0);
  57.     for(var i=0;i<360;i+=20){
  58.     var O = OO;
  59.     for(var j=10; j<35; j+=1){
  60.     var x = fn(i, j).x,
  61.     y = fn(i, j).y;
  62.     OBJ[N++] = o = new CObj(O , x, y);
  63.     O = o;
  64.     }
  65.     }
  66.     setInterval(function() {
  67.     for (var i = 0; i < N; i++) OBJ[i].run();
  68.     }, 16);
  69.     }
  70.     }
  71.     var CObj = function (p, cx, cy) {
  72.     var obj = document.createElement("span");
  73.     this.css = obj.style;
  74.     this.css.position = "absolute";
  75.     this.css.left = "-1000px";
  76.     this.css.zIndex = 1000 - N;
  77.     document.getElementById("screen").appendChild(obj);
  78.     this.ddx = 0;
  79.     this.ddy = 0;
  80.     this.PX = 0;
  81.     this.PY = 0;
  82.     this.x = 0;
  83.     this.y = 0;
  84.     this.x0 = 0;
  85.     this.y0 = 0;
  86.     this.cx = cx;
  87.     this.cy = cy;
  88.     this.parent = p;
  89.     }
  90.     CObj.prototype.run = function () {
  91.     if (!this.parent) {
  92.     this.x0 = m.x;
  93.     this.y0 = m.y;
  94.     } else {
  95.     this.x0 = this.parent.x;
  96.     this.y0 = this.parent.y;
  97.     }
  98.     this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
  99.     this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
  100.     this.css.left = Math.round(this.x) + 'px';
  101.     this.css.top = Math.round(this.y) + 'px';
  102.     }
  103.     return init;
  104.     }();
  105.     </script>
  106.     </head>
  107.     <body>
  108.     <div id="screen"></div>
  109.     <script type="text/javascript">
  110.     new Follow('screen', {
  111.     speed: 4,
  112.     animR : 2,
  113.     fn : function (i, j) {
  114.     return {
  115.     x : j/4*Math.cos(i),
  116.     y : j/4*Math.sin(i)
  117.     }
  118.     }
  119.     })
  120.     </script>
  121.     </body>
  122.     </html>

回复 "JS打造的跟随鼠标移动的小星星组成的图案"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666