javascript动画封装

103 篇文章 0 订阅
97 篇文章 0 订阅
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }

        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
        }

        .container div{
            width: 100%;
            height: 100%;
            text-align: center;
            color: red;
            font-size: 30px;
            border: 1px solid red;
        }
        .aside{
            position: fixed;
            width: 40px;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .aside li{
            height: 50px;
            border-bottom: 1px solid #ddd;
        }

        .aside li a{
            color: pink;
        }

        .aside li.current{
            background: coral;
        }
    </style>
</head>
<body>
    <div class='container' id='box'>
        <div class="current">爱逛好街</div>
        <div>好店主播</div>
        <div>品质特色</div>
        <div>猜你喜欢</div>
    </div>
    <ul class="aside" id='aside'>
        <li class="current">    
            <a href="javascript:;">爱逛好街</a>
        </li>
        <li>
            <a href="javascript:;">好店主播</a>
        </li>
        <li>
            <a href="javascript:;">品质特色</a>
        </li>
        <li>
            <a href="javascript:;">猜你喜欢</a>
        </li>
    </ul>

    <script>
      window.onload = function() {
        /* 
        *obj  节点
        *json {属性:值,...}
        *fn   回调函数
        */
        function Animation(obj, json, Callback) {
          clearInterval(obj.timer);
          obj.timer = setInterval(function() {
            var cur = 0;
            var flag = true;
            for (var attr in json) {
              switch (attr) {
                case 'opacity':
                  cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
                  break;
                case 'scrollTop':
                  cur = obj[attr];
                  break;
                default:
                  cur = parseInt(getStyle(obj, attr));
                  break;
              }
              // 1.求速度
              speed = (json[attr] - cur) / 10;
              speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed)

              // 2临界处理
              if(json[attr] !== cur) {
                flag = false
              }

              // 3运动
              switch (attr) {
                case 'opacity':
                  obj.style[attr] = `alpha(opacity:${cur + speed})`;
                  obj.style[attr] = (cur + speed) / 100;
                  break;
                case 'scrollTop':
                  obj.scrollTop = cur + speed;
                  break;
                default:
                  obj.style[attr] = cur + speed + 'px'
                  break;
              }
            }
            if( flag) {
              clearInterval(obj.timer);
              if(Callback){
                Callback()
              }
              return;
            }
          }, 10)
        }
        // 兼容处理
        /* 
            obj 节点
            attr 属性
         */
        function getStyle(obj, attr) {
          if(obj.currentStyle){
            // 兼容ie
            return obj.currentStyle[attr]
          }else{
            return getComputedStyle(obj, null)[attr]
          }
        }

        // 1.获取标签
        // 页面
        let box = document.getElementById('box');
        let allBoxs = box.children

        // 侧边栏
        let aside = document.getElementById('aside');
        let lis = aside.children;


        // 页面滚动状态
        isClick = false

        // 监听侧边栏按钮
        for(var j=0; j<lis.length; j++){
          // 保存索引
          lis[j].index = j 
          
          lis[j].onclick = function() {
            isClick = true;
            for(var i=0; i<lis.length; i++){
              lis[i].className = ''
            }
            this.className = 'current'

            // 封装动画函数
            Animation(document.documentElement, {
              scrollTop: this.index * document.body.clientHeight
            }, function(){
              isClick = false;
            })

            // 无动画效果
            // document.documentElement.scrollTop = this.index * document.body.clientHeight;
          }
        }


         // 监听页面滚动
        window.onscroll = function(){
          if(!isClick){
            // 获取页面滚动的高度
            var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for(var i = 0; i<lis.length; i++){
              if(docScrollTop > allBoxs[i].offsetTop){
                for(var j=0; j<lis.length; j++){
                  lis[j].className = ''
                }
                lis[i].className = 'current';
              }
            }
          }
        }
      }

      // 刷新页面返回最顶点
      window.onbeforeunload = function(){
        document.documentElement.scrollTop = 0;  //ie下
        document.body.scrollTop = 0;  //非ie
      }
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以给你一个简单的示例:function animate(element, animationName) { element.classList.add('animated', animationName); const handleAnimationEnd = () => { element.classList.remove('animated', animationName); element.removeEventListener('animationend', handleAnimationEnd); } element.addEventListener('animationend', handleAnimationEnd); } ### 回答2: 动画封装函数是为了简化JavaScript中创建和控制动画的过程,并提高代码的可重用性。下面是一个简单的动画封装函数的示例: ```javascript function animate(element, property, targetValue, duration) { let initialValue = parseInt(getComputedStyle(element)[property]) let distance = targetValue - initialValue let startTime = null function animation(timestamp) { if (startTime === null) startTime = timestamp let progress = timestamp - startTime let currentValue = initialValue + (distance * progress) / duration element.style[property] = currentValue + 'px' if (progress < duration) { requestAnimationFrame(animation) } } requestAnimationFrame(animation) } ``` 这个函数接受四个参数:`element`代表要执行动画的元素,`property`代表要动画化的属性,`targetValue`代表属性的目标值,`duration`代表动画持续的时间(以毫秒为单位)。 函数中先获取元素当前属性的初始值和与目标值的差距。然后通过`requestAnimationFrame`方法来不断更新属性的值,并根据当前时间戳和开始时间计算动画进度。最后,判断动画是否已完成,如果没完成则再次请求更新。 要使用该函数,只需在HTML中引入对应的JavaScript文件,然后在其他函数或事件中调用该函数即可。例如: ```javascript let box = document.getElementById('box') animate(box, 'left', 200, 1000) ``` 这段代码会使id为`box`的元素向左移动200像素,持续1秒。 ### 回答3: 动画封装函数可以利用 JavaScript动画功能来创建各种动态效果。以下是一个示例: ```javascript function animate(element, property, targetValue, duration) { let startValue = parseFloat(getComputedStyle(element)[property]); let time = 0; function updateAnimation() { time += 16; // 每秒大约 60 次刷新 if (time >= duration) { element.style[property] = targetValue; return; } let progress = time / duration; let currentValue = startValue + (targetValue - startValue) * progress; element.style[property] = currentValue + 'px'; requestAnimationFrame(updateAnimation); } requestAnimationFrame(updateAnimation); } ``` 这个 `animate` 函数可以通过传入不同的参数来实现不同的动画效果。它接受四个参数: 1. `element`:要应用动画的元素。 2. `property`:要改变的 CSS 属性,比如 `'left'`、`'top'`、`'opacity'` 等。 3. `targetValue`:改变后的目标值,可以是像素值、透明度等。 4. `duration`:动画的持续时间,以毫秒为单位。 例如,要将一个元素的左侧位置从原来的 0px 平滑地移动到 100px,可以使用以下代码: ```javascript let myElement = document.getElementById('myElement'); animate(myElement, 'left', '100px', 1000); ``` 这样,`myElement` 元素在 1 秒钟内就会平滑地从初始位置移动到 100px 的位置。 希望这个简单的动画封装函数能帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值