js实现方块跟随鼠标点击拖影移动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现方块跟随鼠标点击拖影移动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  user-select: none;
  cursor: pointer;
}
.cursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: orangered;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  transition: transform 300ms linear 0s;
  pointer-events: none;
}
#instruct {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -20px);
  font-family: sans-serif;
  color: #333;
  padding: 8px 16px;
  background-color: #dddddd;
  border-radius: 8px;
  transition: opacity 300ms linear 0s;
  user-select: none;
  opacity: 1;
}
#instruct.anim {
  opacity: 0;
}
</style>

  
</head>


  <body onclick="cursorFunc(event);">
  <div class="cursor" blurjs-ghost="8">
    <img src="" onerror="fadeMe(event);" style="display: none !important" />
  </div>
  <p id="instruct">Click anywhere to move the square.</p>

  
      <script >
      function opacityFactor(opacity, f) {
    return ((+opacity * f)).toString();
}

function getTrueOpacity(el) {
    let opacity = '1';
    let specialOpacity = '1';
    let _originalOpacity_ = el.outerHTML.match(/((?<=fadejs-data="opacity:)|(?<=fadejs-data="opacity: ))(([0-9]\d*(\.\d+)?;)|([0-9]\d*(\.\d+)?"))/gm);
    if (_originalOpacity_ && _originalOpacity_.length > 0) {
        opacity = _originalOpacity_[0].slice(0, _originalOpacity_[0].length - 1).replace(/opacity:/, '');
        specialOpacity = getSpecialOpacityFactor(opacity).toFixed(4).toString();
        opacity = (+opacity / 1.80555555).toFixed(8).toString(); //1.857142
    } return [opacity, specialOpacity];
}

function getSpecialOpacityFactor(x) {
    x = Math.abs(+x);
    if (x < 1) {

        if (x < .01) {
            return 0;
        } else if (x >= .01 && x <= .05) {
            return .01;
        } else if (x > .05 && x <= .2) {
            return (13.3333 * Math.pow(x, 3) - 6 * Math.pow(x, 2) + 1.06667 * x - 0.03);
        } else if (x > .2 && x < .3) {
            if (x <= .28) {
                return (465029.7619 * Math.pow(x, 5) - 554650.2976 * Math.pow(x, 4) + 263229.1667 * Math.pow(x, 3) - 62118.6756 * Math.pow(x, 2) + 7287.7232 * x - 339.917);
            } else { return .09; }
        } else if (x >= .3 && x < .4) {
            if (x >= .32) {
                return (9375 * Math.pow(x, 4) - 13229.2 * Math.pow(x, 3) + 6987.5 * Math.pow(x, 2) - 1636.58 * x + 143.466);
            } else { return .09; }
        } else if (x >= .4 && x < .55) {
            return (-24.2424 * Math.pow(x, 3) + 35.8182 * Math.pow(x, 2) - 16.7485 * x + 2.67);
        } else if (x >= .55 && x < .6) {
            return (1.2 * x - 0.4);
        } else if (x >= .6 && x < .65) {
            return 0.6 * x - 0.039999999999999;
        } else if (x >= .65 && x < .85) {
            return (-13.3333 * Math.pow(x, 3) + 30 * Math.pow(x, 2) - 20.8667 * x + 4.9);
        } else if (x >= .85) {
            return (-26.1905 * Math.pow(x, 3) + 72.7143 * Math.pow(x, 2) - 64.8774 * x + 19.3439);
        }

    } else { return x > 0 ? 1 : 0; }
}

function whenDone() {
    var x = document.getElementsByClassName("blurjs");
    var i;
    for (i = 0; i < x.length; i++) {
        if (window.runScriptA !== 1) {
            var y = x[i].parentNode.children;
            var r;
            for (r = 0; r < y.length; r++) {
                if (y[r].className.search("blurjs") >= 0) {
                    if (y[r].className.search("scale") >= 0) {
                        var justTemp_1 = y[r].outerHTML.replace(/class=/, "style='animation-delay:0ms;--scale:1;' class=");
                        var justTemp_2 = y[r].outerHTML.replace(/class=/, "style='animation-delay:50ms;--scale:0.75;' class=");
                        var justTemp_3 = y[r].outerHTML.replace(/class=/, "style='animation-delay:100ms;--scale:0.5;' class=");
                        var justTemp_4 = y[r].outerHTML.replace(/class=/, "style='animation-delay:150ms;--scale:0.25;' class=");
                        y[r].outerHTML = justTemp_4 + justTemp_3 + justTemp_2 + justTemp_1;
                        r += 3;
                    } else {
                        var justTemp_1 = y[r].outerHTML.replace(/class=/, "style='animation-delay:0ms;' class=");
                        var justTemp_2 = y[r].outerHTML.replace(/class=/, "style='animation-delay:20ms;' class=");
                        var justTemp_3 = y[r].outerHTML.replace(/class=/, "style='animation-delay:40ms;' class=");
                        var j.........完整代码请登录后点击上方下载按钮下载查看