JS特效之简单动画封装

最新推荐文章于 2021-12-12 17:35:22 发布
最新推荐文章于 2021-12-12 17:35:22 发布
阅读量471 收藏 2
点赞数 1

这是一个简单的盒子移动问题，个人觉得比较经典，容易理解。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画封装</title>
    <style>
        .box1 {
            margin: 0;
            padding: 10px;
            height: 200px;
            background-color: lightpink;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box1">
    <button>运动300</button>
    <button>运动600</button>
    <div class="box2"></div>
</div>
<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];

    var timer = null;

    btnArr[0].onclick = function () {
        timer = setInterval(function () {
            //盒子自身的位置+步长
            box2.style.left = box2.offsetLeft + 10 + "px";
            //如果停止盒子？清除定时器
            if(box2.offsetLeft === 300){
                clearInterval(timer);
            }
        },30);
    }

    btnArr[1].onclick = function () {
        timer = setInterval(function () {
            //盒子自身的位置+步长
            box2.style.left = box2.offsetLeft + 10 + "px";
            //如果停止盒子？清除定时器
            if(box2.offsetLeft == 600){
                clearInterval(timer);
            }
        },30);
    }

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

以上代码运行以后，你会发现，你只有在点击第一次的时候，得到想要的效果，多次点击就会出现bug，下面我们来看看如何解决这些bug。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            margin: 0;
            padding: 5px;
            height: 200px;
            background-color: #ddd;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
    </style>
</head>
<body>
<div class="box1">
    <button>运动200</button>
    <button>运动400</button>
    <div class="box2"></div>
</div>
<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];
    var timer = null;

    btnArr[0].onclick = function () {
        animate(200);
    }
    btnArr[1].onclick = function () {
        animate(400);
    }

    function animate(target) {
        //bug1：点击多次以后，越来越快：解决：每次只能开一个定时器，执行定时器前先清除定时器。
        //常识：调用定时器，先清除定时器。
        clearInterval(timer);

        //bug2：多次点击，无法返回，一直向后走
        //      原因：步长不能为恒定值，
        //            传递的目标值如果比当前值大，步长为+10；
        //            传递的目标值如果比当前值小，步长为-10；

        var speed = (target - box2.offsetLeft)>0 ? 10 : -10;
        timer = setInterval(function () {
            //bug3：二次点击不停止，来回移动问题
            //原因：如果当前值===目标值，那么先判断之前的距离还有多少，如果小于不长，那就不走了。
            var val = target - box2.offsetLeft;
            //盒子自身的位置+步长
            box2.style.left = box2.offsetLeft + speed + "px";
            if(Math.abs(val)<10){
                box2.style.left = target + "px";
                clearInterval(timer);
            }
        },30);
    }
    
</script>
</body>
</html>

经过上述处理，可以达到多次点击不出现bug的效果。

如果有一天要传递另外一个盒子，那么我们的方法就不好用了，所以应该增加一个参数，使得封装的动画可以在任何一个盒子上使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            margin: 0;
            padding: 5px;
            height: 200px;
            background-color: #ddd;
            position: relative;
        }
        button {
            margin: 5px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 40px;
        }
        .box3 {
             width: 100px;
             height: 100px;
             background-color: pink;
             position: absolute;
             left: 0px;
            top: 150px;
         }
    </style>
</head>
<body>
<div class="box1">
    <button>运动200</button>
    <button>运动400</button>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<script>

    var btnArr = document.getElementsByTagName("button");
    var box2 = document.getElementsByClassName("box2")[0];
    var box3 = document.getElementsByClassName("box3")[0];

    var timer = null;
    //绑定事件
    btnArr[0].onclick = function () {
        //如果有一天要传递另外一个盒子，那么我们的方法就不好用了，
        // 所以我们要增加第二个参数：被移动的盒子本身。
        animate(box3,200);
    }
    btnArr[1].onclick = function () {
        animate(box3,400);
    }

    function animate(ele,target) {
        //常识：调用定时器，先清除定时器。
        //一个盒子只能有一个定时器，这样的话，被移动的是这个盒子本身
        clearInterval(timer);
        var speed = (target - ele.offsetLeft)>0 ? 10 : -10;
        timer = setInterval(function () {
            var val = target - ele.offsetLeft;
            //盒子自身的位置+步长
            ele.style.left = ele.offsetLeft + speed + "px";
            if(Math.abs(val)<10){
                ele.style.left = target + "px";
                clearInterval(timer);
            }
        },30);
    }
    
</script>
</body>
</html>


最后一种方法可以运用到多个不同盒子中。


luoyu1315
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js实现超级爆炸酷炫动画+图片切换特效
06-04
在本项目中，"js实现超级爆炸酷炫动画+图片切换特效"是一个使用JavaScript实现的动态视觉效果，结合了图片的动态切换和独特的动画效果，为网页增添互动性和视觉吸引力。这种效果通常用于网站的头部轮播图、产品展示...
自定义指令中的钩子函数...
m0_60237095的博客
07-27 2378
一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 我们会在稍后讨论渲染函数时介绍更
封装 Anchors 锚点组件
Echo___Echo的博客
11-10 1258
背景: 需求是页面要加一个锚点功能用户通过点击快速定位到指定位置,同时页面增加滚到监听功能,动态激活锚点 先上效果图 解题思路 1 实现点击锚点,页面滑动到指定范围 2 页面滚到增加监听事件,判断当前出去那个锚点区域,对应锚点置为激活状态 Let’s do it!!! 1.实现点击锚点,页面滑动到指定范围 实现步骤: step1: 在锚点组件点击对应锚点,获取到是第 n 个锚点被点击了,获取对应 dom 元素 step2: 需要滚动得高度 = 获取到第 n 个锚点所在父容器得位置 + 页面卷起来得.
React Hooks封装一个简单的锚点固钉的组件
xishuiinsz的博客
12-13 1207
JS部分 import React, { useState, useEffect } from 'react'; import { Icon } from 'tinper-bee' import './index.less' const AnchorLink = props => { const [isExpanded, setIsExpanded] = useState(true)...
js常用特效
qq_40001322的博客
03-19 2047
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 　　<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2.<body onselectstart="return false"> 取消选取、防止复...
js基础可以实现的几个特效
mhc20201554114的博客
12-12 3324
学弟学妹们已经学完html和css了，接下来选择学习前端的学弟学妹就要学习js了，因此我现在先将记忆中能回想起来的几个js特效以及实现思路先写下来，以免到时候问起来我一下子想不起来。 1.轮播图 轮播图可以说是js运用最广泛，最实用的特效之一了，写法也多种多样，这里就先把我知道的两种简单的轮播图实现方式及思路写下来。 （1）左右滑动式轮播图 这个轮播图的效果是图片左右滑动，默认的方向是图片从右向左滑动，实现的思路是先写一个盒子，然后盒子里写一个高度与其一致，宽度是他的...
three.js全息光影动画特效
07-24
在本文中，我们将深入探讨如何使用three.js库创建全息光影动画特效。three.js是JavaScript的一个强大库，专为WebGL设计，用于在浏览器中创建3D图形。它提供了丰富的功能，包括对象创建、光照、纹理、动画以及更多，...
js符号砸到文字变大动画特效
06-24
总的来说，"js符号砸到文字变大动画特效"涉及了JavaScript的基本语法、DOM操作、定时器、事件监听、CSS样式控制以及动画原理等多个知识点。通过理解和掌握这些技术，开发者可以创造出更多富有创意的网页交互效果，...
three.js+html5 canvas丝带飘动动画特效
06-11
标题"three.js+html5 canvas丝带飘动动画特效"涉及到的主要技术是`three.js`和`HTML5 Canvas`，这两者都是网页开发中的关键工具。`three.js`是一个基于WebGL的3D库，用于在浏览器中创建3D图形。而`HTML5 Canvas`则是...
js+css实现文字散开重组动画特效代码分享
10-23
在本文中，我们将探讨如何使用JavaScript（JS）和Cascading Style Sheets（CSS）来创建一个令人印象深刻的文字散开重组动画特效。这种特效通常用于吸引用户注意力，提升用户体验，特别是在网页设计和交互式应用中。...
十款超炫的页面（简单的js做出超炫的页面效果）
04-20
利用简单的js,css作出超炫的页面效果。
js特效的几个特效例子
10-31
js特效的几个特效例子，附带效果样式。很实用新手用特别适合。
js特效（40套）
11-09
好看的js特效，包含40套js特效，可以直接浏览，使用时将js引入即可
简单的JavaScript特效
01-29
刚学JavaScript时自己写的一些简单特效
javascript特效
04-25
一些简单常用的js特效，JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript)来编写制作动态特殊效果，比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
网站设计之常见简单实用的JavaScript特效总结（上篇）
热门推荐
杨秀璋的专栏
12-19 1万+
这篇主要是总结JavaScript常见简单实用的特效，主要从代码量短、简单实用几个方面进行叙述。其中特效包括： 1.鼠标悬停图片切换查看器； 2.鼠标移动图片放大； 3.鼠标移动切换内容； 4.贵财下拉菜单案例； 5.JS图片放大镜功能-类似淘宝； 6.下一页翻页跳转功能。 下载地址： 希望文章对你有所帮助，尤其是学习前端JavaScript的同学。
这么优秀的几个库，想必你也需要！
weixin_46837985的博客
12-17 326
前言一个好的前端界面中很重要的内容就是动画，使用符合场景的动画不仅可以优化网站页面中的交互细节，提高用户体验，还可以让页面更具有吸引力，给网站带来更多访问量。如果你还不具备手写各种骚动画...
js常见特效
m0_52610047的博客
11-20 1856
选项卡 【重：设置自定义索引】 思路： ①自定义索引 排他思想： ②干掉所有人：先将所有按钮的类名都清空，内容隐藏none（for循环） ③复活我自己：之后给当前点击的按钮添加类名，将对应的内容通过自定义索引显示出来 <div id=container> <div id="title"> <div class="active">标题1</div> ...
JavaScript网页特效5则
方逸涛的专栏
07-25 889
 动态字幕代码：在需要处加入< marquee onmouseover=this.stop() onmouseout=this.start()>欢迎访问JavaScript教程网 特点：当你把鼠标指向字幕时字幕停止并有链接、移开鼠标指针字幕又滚动了，运用以上代码即可实现。延伸：动态字幕有一个属性“direction”，它是控制字幕滚动方向的，把“
用cesium封装一个卷帘特效
最新发布
03-29
最后，可以使用Tween.js等库来实现平滑的动画效果，使卷帘特效更加生动。 下面是一个示例代码，实现了一个基本的卷帘特效： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 创建底图图层...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值