PC端网页特效

古德猫码农

已于 2022-03-11 22:12:52 修改

阅读量97

点赞数

分类专栏：前端文章标签： javascript

于 2022-03-06 21:07:33 首次发布

本文链接：https://blog.csdn.net/qq_47040462/article/details/123229274

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、元素偏移量offset系列

eg：

offset和style区别：

2、client系列

立即执行函数

作用：创建一个独立作用域，里面所有变量都是局部变量，不会有命名冲突

eg：

3、元素滚动scroll系列

兼容性

三大系列比较及用法

mouseenter和mouseover区别

4、动画函数封装

核心原理

动画函数的封装（函数需要传递动画对象和移动到的距离参数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: blue;
        } 
        .span {
          position: absolute;
          top: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="span"></div>
    <script>
        // 简单动画函数封装obj目标对象  target目标位置
      function animate(obj,target) {
        var time=setInterval(function() {
            if(div.offsetLeft >=target) {
                // 停止动画
                clearInterval(time);
            }
            obj.style.left=obj.offsetLeft+1+'px';
        },30)
      }
      var div=document.querySelector(".box");
      var span=document.querySelector(".span");
      animate(div,100);
      animate(span,100);

    </script>
</body>
</html>

给不同元素记录不同的定时器

eg：

css：
 .ca {
            position: absolute;
          top: 400px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
html：  <div class="ca">点击我</div>
js：
//   不同元素给不同的计时器 
    //定时器会叠加，如果使用点击事件这种类型的时候会点一次触发一次，不断叠加，
    // 添加取消定时器避免叠加
function animate(obj,target) {
        clearInterval(obj.time);
        obj.time=setInterval(function() {
            if(div.offsetLeft >=target) {
                // 停止动画
                clearInterval(obj.time);
            }
            obj.style.left=obj.offsetLeft+1+'px';
        },30);
      }
      var div=document.querySelector(".box");
      var span=document.querySelector(".span");
      var ca=document.querySelector(".ca");
      animate(div,100);
      animate(span,100);
      ca.addEventListener("click",function() {
          animate(ca,200);
      })

缓动动画原理

匀速动画：盒子当前位置+固定值

缓动动画：盒子当前位置+变化值（目标值-现在的位置）/10

eg:

   //   缓动动画原理
      function animate(obj,target) {
        clearInterval(obj.time);
        obj.time=setInterval(function() {
            var stop=(target-obj.offsetLeft) /10;
            if(div.offsetLeft =target) {
                // 停止动画
                clearInterval(obj.time);
            }
            obj.style.left=obj.offsetLeft+stop+'px';
        },30);
      }
      var div=document.querySelector(".box");
      var span=document.querySelector(".span");
      var ca=document.querySelector(".ca");
      animate(div,100);
      animate(span,100);
      ca.addEventListener("click",function() {
          animate(ca,200);
      })