js实现鼠标移动伞位置躲避重力下落的物体效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现鼠标移动伞位置躲避重力下落的物体效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background: #ffedec;
          overflow: hidden;
        }
        
        .container {
          position: absolute;
          top: calc( 50% - 200px );
          left: calc( 50% - 125px );
          width: 250px;
          height: 450px;
        }
        
        .hole {
          display: block;
          position: absolute;
          top: 0;
          left: calc( 50% - 97px );
          width: 193px;
          height: 59px;
          z-index: 1;
        }
        
        .umbrella {
          position: absolute;
          bottom: 0;
          left: calc( 50% - 125px );
          width: 250px;
          transform-origin: 50% 0;
          z-index: 2;
        }
        .umbrella__illus {
          display: block;
          margin-top: -22px;
          width: 100%;
        }
        .umbrella__selec {
          position: absolute;
          top: calc( 50% - 208px );
          left: calc( 50% - 159px );
          width: 317px;
          height: 396px;
          fill: white;
        }
        
        .object {
          position: absolute;
          top: 0;
          left: 50%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          pointer-events: none;
          transition: opacity 0.1s linear;
        }
        .object--1 {
          width: 2.875em;
          height: 2.3125em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-1.svg");
        }
        .object--2 {
          width: 6.375em;
          height: 4.875em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-2.svg");
        }
        .object--3 {
          width: 3.062em;
          height: 2.375em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-3.svg");
        }
        .object--4 {
          width: 1.875em;
          height: 4.84375em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-4.svg");
        }
        .object--5 {
          width: 2.96875em;
          height: 3.375em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-5.svg");
        }
        .object--6 {
          width: 2.875em;
          height: 2.25em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-6.svg");
        }
        .object--7 {
          width: 4em;
          height: 4em;
          background-image: url("//repo.bfw.wiki/bfwrepo/svg/object/object-7.svg");
        }
        .object.is-hidden {
          opacity: 0;
        }
    </style>




</head>

<body>
    <div class="container">
        <img src="//repo.bfw.wiki/bfwrepo/svg/object/hole-vert.svg" class="hole" />

        <div class="umbrella">
            <svg xmlns="http://www.w3.org/2000/svg" width="250.936" height="313.154" class="umbrella__illus"><g stroke-linecap="round" stroke-linejoin="round"><g fill="#ffd364"><path d="M117.898 312.154c-6.115 0-11.09-4.975-11.09-11.09v-9.137c0-2.201 1.792-3.992 3.993-3.992a3.996 3.996 0 013.991 3.992v9.137a3.11 3.11 0 003.106 3.106 3.11 3.11 0 003.107-3.106v-33.072a3.996 3.996 0 013.992-3.992c2.2 0 3.991 1.79 3.991 3.992v33.072c0 6.115-4.975 11.09-11.09 11.09z"/><path d="M117.898 311.154c5.564 0 10.09-4.526 10.09-10.09v-33.072a2.992 2.992 0 10-5.983 0v33.072a4.111 4.111 0 01-4.107 4.106 4.11 4.11 0 01-4.106-4.106v-9.137a2.992 2.992 0 00-5.983 0v9.137c0 5.564 4.526 10.09 10.09 10.09m0 2c-6.667 0-12.09-5.423-12.09-12.09v-9.137a4.997 4.997 0 014.992-4.992 4.997 4.997 0 014.991 4.992v9.137c0 1.162.945 2.106 2.106 2.106a2.11 2.11 0 002.107-2.106v-33.072a4.997 4.997 0 014.992-4.992 4.997 4.997 0 014.991 4.992v33.072c0 6.667-5.423 12.09-12.09 12.09z" fill="#8a97ff"/></g><path fill="#aec7ff" stroke="#8a97ff" stroke-width="2" d="M121.044 22.5h8v245h-8z"/><path fill="#8a97ff" stroke="#8a97ff" stroke-width="2" d="M121.044 5.5h8v129h-8z"/><path d="M1.423 154.978S-11.863 32.585 118.987 22.117c0 0-43.481 27.377-40.663 132.858 0 0-8.455-20.533-40.663-20.533S1.423 154.978 1.423 154.978z" fill="#fc7a5b" stroke="#8a97ff" stroke-width="2"/><path d="M249.544 154.5s12.845-121.532-118-132c0 0 43.818 26.519 41 132 0 0 7.793-20 40-20s37 20 37 20z" fill="#fc7a5b" stroke="#8a97ff" stroke-width="2"/><path d="M78.544 154.5s10.168-26 46-26 48 26 48 26 7.5-95.364-41-132h-13s-40.402 20.478-40 132z" fill="#ffb0b0" stroke="#8a97ff" stroke-width="2"/><path fill="#fff" stroke="#8a97ff" stroke-width="2" d="M78.319 152.559v12.078"/><path fill="#fff" stroke="#8a97ff" stroke-width="2" d="M172.784 152.559v12.078"/><path d="M125.228 1h.18a5.245 5.245 0 015.245 5.245v15.872h0-10.67 0V6.245A5.245 5.245 0 01125.228 1z" fill="#fffbee" stroke="#8a97ff" stroke-width="2"/></g></svg>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317 396" class="umbrella__selec"><path d="M314 10c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3h-4c-1.7 0-3 1.3-3 3v1H163c0-1.7-1.3-3-3-3h-2c-1.7 0-3 1.3-3 3H10V3c0-1.7-1.3-3-3-3H3C1.3 0 0 1.3 0 3v4c0 1.7 1.3 3 3 3h1v184c-1.7 0-3 1.3-3 3v2c0 1.7 1.3 3 3 3v184H3c-1.7 0-3 1.3-3 3v4c0 1.7 1.3 3 3 3h4c1.7 0 3-1.3 3-3v-1h145c0 1.7 1.3 3 3 3h2c1.7 0 3-1.3 3-3h144v1c0 1.7 1.3 3 3 3h4c1.7 0 3-1.3 3-3v-4c0-1.7-1.3-3-3-3h-1V202c1.7 0 3-1.3 3-3v-2c0-1.7-1.3-3-3-3V10h1zM158 3h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1zM3 8c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h4c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1H3zm0 191v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1zm5 194c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h4c.6 0 1 .4 1 1v4zm152 0h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zm154-5c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h4zm0-191v2c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1zm-3-3c-1.7 0-3 1.3-3 3v2c0 1.7 1.3 3 3 3v184h-1c-1.7 0-3 1.3-3 3v1H163c0-1.7-1.3-3-3-3h-2c-1.7 0-3 1.3-3 3H10v-1c0-1.7-1.3-3-3-3H6V202c1.7 0 3-1.3 3-3v-2c0-1.7-1.3-3-3-3V10h1c1.7 0 3-1.3 3-3V6h145c0 1.7 1.3 3 3 3h2c1.7 0 3-1.3 3-3h144v1c0 1.7 1.3 3 3 3h1v184zm0-186h-1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h4c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-3z"/></svg>
        </div>

        <div class="objects"></div>
    </div>



    <script type="module">
        var mouseX = 0;
        var mouseY = 0;
        
        /* Umbrella class */
        class Umbrella {
          constructor() {
            this.container = document.querySelector(".umbrella");
            this.umbrella = document.querySelector(".umbrella__illus");
            this.selection = document.querySelector(".umbrella__selec");
        
            this.angle = 0;
            this.iAngle = 0;
            this.sAngle = 0;
            this.moveX = 0;
            this.moveY = 0;
            this.destX = 0;
            this.destY = 0;
            this.iMoveX = 0;
            this.iMoveY = 0;
            this.sMoveX = 0;
            this.sMoveY = 0;
            this.x = 0;
            this.y = 0;
            this.accelY = 0;
            this.radius = 0;
        
            this.isIdle = true;
            this.atDest = true;
        
            this.init(.........完整代码请登录后点击上方下载按钮下载查看