【Anime.js】——JavaScript动画库：Anime.js——学习笔记

news2025/7/10 13:40:50

目录

一、搭建开发环境

 二、基本功能和使用

开始制作动画

动画属性

三、anime.stagger——交错动画

四、timeline——时间轴

 五、控制、回调与助手

一、控制

 二、回调

三、助手

六、easings——动画运动曲线

七、SVG动画

官网定义：

anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。

一、搭建开发环境

1、新建一个文件夹 ，用vs code打开，将其添加到工作区。

2、打开终端

在终端输入：

npm i animejs --save

 3、创建文件夹，使用anime.js包

位置如图。

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>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="node_modules/animejs/lib/anime.min.js"></script>
    <script>
        anime({
            targets:'div',
            translateX:'400px',
            easing:'linear',
            duration:2000
        })
    </script>
</body>
</html>

 就能实现一个方块匀速运动的效果了。

 二、基本功能和使用

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id = 'first'></div>
    <div class = 'second'></div>
    <div class = 'second'></div>
    <div class = 'second'></div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        anime({
            targets:'#first',
            translateX:'400px'
        })
    </script>
</body>
</html>

 第一个div动：

 如果把代码改成这样：

 <script>
        anime({
            targets:'.second',
            translateX:'400px'
        })
 </script>

 可以看到，targets用来作为选择器来选择移动元素。 

开始制作动画

anime({
targets: 'div',
translateX: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});

targets属性定义了制作动画的元素或js对象：

  • css选择器 如：'div','#el path';
  • DOM元素 如： document.querySelector('.item')
  • 节点列表 如： document.querySelectorAll('.item')
  • 对象
  • 数组 如：['div', '.item', domNode]

动画属性

1、CSS：

  • opacity 透明度 0~1
  • backgroundColor
  • fontSize
  • borderRadius
  • backgroundColor

2、transforms变换：

  • translateX x轴的值
  • translateY y轴的值
  • retate 旋转
  • scale 大小变换 例：scale:2   scale:0.5   
  • rotate 旋转 例：rotate:'1turn'（旋转一周）

3、对象属性

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div id="JSobjectProp">
        <span>{"myProperty":"0"}</span>
    </div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        var myObject = {
            prop1: 0,
            prop2: '0%'
        }
        var JSobjectProp = anime({
            targets: myObject,
            prop1: 50,
            prop2: '100%',
            easing: 'linear',
            round: 1,
            update: function () {
                var el = document.querySelector('#JSobjectProp span');
                el.innerHTML = JSON.stringify(myObject);
            }
        });
    </script>
</body>

</html>

开始： 

 

 变为：

4、DOM属性

<!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>
    </style>
</head>

<body>
    <input class="text-output" value="0">
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        var domAttributes = anime({
            targets: 'input',
            value: 1000, // value变化为1000
            round: 100, //表示小数，把1分成了100份，也就是展示两位小数点
            easing: 'easeInOutExpo'
        });
    </script>
</body>

</html>

 5、给每个属性单独设置

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        anime({
                targets: 'div',
                translateX: {
                    value: 250,//通过value来设置值
                    duration: 800 //表示延长动画效果的时间
                },
                rotate: {
                    value: 360,
                    duration: 1800,
                    easing: 'easeInOutSine'
                },
                scale: {
                    value: 2,
                    duration: 1600,
                    delay: 800,
                    easing: 'easeInOutQuart'
                },
                delay: 250 // All properties except 'scale' inherit 250ms delay
            });
    </script>
</body>
</html>

 6、属性参数

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script src="../node_modules/animejs/lib//anime.min.js"></script>
    <script>
        anime({
            targets: 'div',
            translateX: 270,
            direction: 'alternate',
            loop: true,
            // 接收三个参数：
            // el：表示当前目标元素
            // i: 表示当前目标元素下标
            // l：表示目标元素的总长度
            delay: function (el, i, l) {
                return i * 100;
            },
            endDelay: function (el, i, l) {
                return (l - i) * 100;
            }

        });
    </script>
</body>

</html>

三、anime.stagger——交错动画

1、

anime.stagger(value, options)
//它针对多个元素。
//第一个参数接收：Number, String, Array
//第二个参数接收：Object
anime({
  targets: '.basic-staggering-demo .el',
  translateX: 270,
  delay: anime.stagger(100) // increase delay by 100ms for each elements.
});

效果： 

 

2、 

anime.stagger(value, {start: startValue}) //在value后面添加对象属性

 

anime({
  targets: '.staggering-start-value-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {start: 500}) // delay starts at 500ms then increase by 100ms for each elements.
});

3、

anime.stagger([startValue, endValue]) //作为rotate旋转的属性值
anime({
  targets: '.range-value-staggering-demo .el',
  translateX: 270,
  rotate: anime.stagger([-360, 360]), // rotation will be distributed from -360deg to 360deg evenly between all elements
  easing: 'easeInOutQuad'
});

 4、

anime.stagger(value, {from: startingPosition}) //从哪个位置依次延迟
anime({
  targets: '.staggering-from-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});

5、

anime.stagger(value, {direction: 'reverse'}) //反向延迟
anime({
  targets: '.staggering-direction-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {direction: 'reverse'})
});

6、

anime.stagger(value, {grid: [rows, columns]})
anime({
  targets: '.staggering-grid-demo .el',
  scale: [
    {value: .1, easing: 'easeOutSine', duration: 500},
    {value: 1, easing: 'easeInOutQuad', duration: 1200}
  ],
    //grid: [14, 5]表示14行5列
    //from 表示从哪里开始
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});

7、

anime.stagger(value, {grid: [rows, columns], axis: 'x'})
//axis设置为x，表示将一整行设置为整体
//设为y，会将一整列设置为整体
anime({
  targets: '.staggering-axis-grid-demo .el',
  translateX: anime.stagger(10, {grid: [14, 5], axis: 'x'})
})

 

四、timeline——时间轴

接下来学习官网的时间轴模块。

 这个模块告诉我们可以创建一个时间轴，在这个时间轴上可以创建多个动画，并且添加在时间轴上的每一个动画都会在上一个动画结束之后开始执行。

1、创建时间轴

创建一个时间轴：

//调用该方法：
var myTimeline = anime.timeline(parameters);

如何通过这个时间轴调用对象：

myTimeline.add(parameters, offset);
//parameters 动画相关的参数
//offset 时间偏移量

实例： 

// 创建了一个时间轴对象
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750  // 持续时间是750ms
});

// 时间轴上分别创建了三个动画
tl
.add({
  targets: '.basic-timeline-demo .el.square', //方形
  translateX: 250,   // 平移250px
})
.add({
  targets: '.basic-timeline-demo .el.circle', //圆形
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.triangle', //三角形
  translateX: 250,
});

 会等到上一个方块执行完，才会执行圆。

2、时间偏移量

 时间偏移量是我们创建时间轴的第二个参数。

默认情况下，每一个动画都会在上一个动画结束之后开始执行，通过时间偏移量就可以改变每个动画开始执行的时间。

如下图可以看到，时间偏移量可以有两种数据类型：String字符串、Number数字

 字符串是相对于上一个动画的设置的，比如：

'+=200'表示：是上一个动画执行结束完200ms后再执行当前的动画

'-=200'表示：是上一个动画执行结束前200ms后执行当前的动画

数字偏移量是相对于整个时间轴的绝对偏移量。

200表示：当前时间轴开始200ms后执行。

// Create a timeline with default parameters
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.offsets-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // 相对偏移量————字符创
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 400); // 绝对偏移量————数字

3、参数继承

添加在时间轴中的动画，都可以继承表格里的这些属性
targets
easing
duration
delay
endDelay
round

注意：

direction 和 loop 是不可以被继承的。

演示：（继承targets属性） 

 

 五、控制、回调与助手

一、控制

页面中需要的元素：

 1、动画上的属性

animation.play(); //开始
animation.pause(); //暂停
animation.restart(); //重新开始
animation.reverse(); //反向移动
// seek 当前元素显示在具体时间的某一帧
// timeStamp:跳到具体的时间
animation.seek(timeStamp); 
// 通过滚动条来控制动画
// scrollPercent / 100：求滚动条的百分比
// animation.duration：当前动画的时间
// (scrollPercent / 100) * animation.duration：具体跳到的时间值
animation.seek((scrollPercent / 100) * animation.duration);

 

 2、时间轴上的属性

// 控制时间轴上的动画：
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

 二、回调

 1、UPDATE：每更新一帧就会调用一次

var updates = 0;

anime({
  targets: '.update-demo .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
    // anim当前动画的实例
  update: function(anim) {
    updates++;
    // anim.progress 当前动画的进度
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

示例： 

 表示更新了58帧。

2、BEGIN & COMPLETE

BEGIN：动画开始执行前触发一次

COMPLETE：动画结束时触发一次

        这两个属性是布尔类型

示例：

注意箭头处的写法是不一样的！！！

 效果：

 3、LOOPBEGIN & LOOPCOMPLETE

LOOPBEGIN：循环开始时就会触发一次

LOOPCOMPLETE：循环结束时就会触发一次

注意：动画一定是循环的动画

var loopBegan = 0;
var loopCompleted = 0;

anime({
  targets: '.loopBegin-loopComplete-demo .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});

4、CHANGE：动画元素每更新一次就调用一次

与update的区别：change在delay和endDelay期间是不更新的，update反之。

var changes = 0;

anime({
  targets: '.change-demo .el',
  translateX: 270,
  delay: 1000,
  endDelay: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  change: function() {
    changes++;
    changeLogEl.value = 'changes : ' + changes;
  }
});

 5、FINISHED PROMISE：每一个动画实例完成都会返回一个promise

// animation表示创建的动画实例
animation.finished.then(function() {
  // Do things...
});
var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);

三、助手

1、anime.remove

// remove 将某个targets对象移出
anime.remove(targets);
animation.remove(targets);
var animation = anime({
  targets: '.remove-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

document.querySelector('.remove-el-button').addEventListener('click', function() {
  animation.remove('.remove-demo .line:nth-child(2) .el');
});

2、anime.get

// get 获取元素的信息
// target 获取的元素
// propertyName 获取的元素的属性
// unit 单位
anime.get(target, propertyName, unit);
var logEl = document.querySelector('.get-value-demo-log');
var el = document.querySelector('.get-value-demo .el');

logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :<br>';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'

3、anime.set

// set 设置元素的属性值是什么
// {property: value} ：是一个对象，{属性：值}
// target(s) 类型是'string', var
// value 类型是object
anime.set(targets, {property: value});
anime.set('.set-value-demo .el', {
  translateX: function() { return anime.random(50, 250); },
  rotate: function() { return anime.random(0, 360); },
});

4、anime.random

// random 返回一个随机数
anime.random(minValue, maxValue);
function randomValues() {
  anime({
    targets: '.random-demo .el',
    translateX: function() {
      return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

5、anime.running

//running 表示动画实例，其长度代表动画个数
anime.running
var runninLogEl = document.querySelector('.running-log');

anime({
  targets: '.running-demo .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '.running-demo .circle.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc'
});

anime({
  targets: '.running-demo .triangle.el',
  translateX: 270,
  direction: 'alternate',
  easing: 'easeInOutQuad',
  loop: true,
  update: function() {
    runninLogEl.innerHTML = 'there are currently ' + anime.running.length + ' instances running';
  }
});

六、easings——动画运动曲线

1、使用

// linear表示线性
easing: 'linear'

2、方法

查看这些方法是如何的变化

INOUTIN-OUTOUT-IN
'easeInQuad''easeOutQuad''easeInOutQuad''easeOutInQuad'
'easeInCubic''easeOutCubic''easeInOutCubic''easeOutInCubic'
'easeInQuart''easeOutQuart''easeInOutQuart''easeOutInQuart'
'easeInQuint''easeOutQuint''easeInOutQuint''easeOutInQuint'
'easeInSine''easeOutSine''easeInOutSine''easeOutInSine'
'easeInExpo''easeOutExpo''easeInOutExpo''easeOutInExpo'
'easeInCirc''easeOutCirc''easeInOutCirc''easeOutInCirc'
'easeInBack''easeOutBack''easeInOutBack''easeOutInBack'
'easeInBounce''easeOutBounce''easeInOutBounce''easeOutInBounce'

举例：

 3、BÉZIER曲线和spring弹簧

二者都是参数改变变化的曲线

// 方法接收4个参数，通过参数来改变运动曲线
easing: 'cubicBezier(.5, .05, .1, .3)'
// mass 质量
// stiffness 高度
// damping 阻尼
// velocity 速度
easing: 'spring(mass, stiffness, damping, velocity)'
属性默认值MINMAX
Mass10100
Stiffness1000100
Damping100100
Velocity00100

4、ELASTIC

// amplitude 振幅
// period 来回的次数
// 也是表示弹簧，只不过弹的方向不一样
easing: 'easeOutElastic(amplitude, period)'
INOUTIN-OUTOUT-IN
'easeInElastic''easeOutElastic''easeInOutElastic''easeOutInElastic'
属性默认值MINMAX
Amplitude1110
Period.50.12

5、跳动

// numberOfSteps跳动的步数
easing: 'steps(numberOfSteps)'
属性默认值MINMAX
Number of steps101∞

6、自定义函数

easing: function() { return function(time) { return time * i} }

注意返回的一定是个函数

anime({
  targets: '.custom-easing-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {
      return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});

七、SVG动画

1、运动

// svg path 表示svg的路径
var myPath = anime.path('svg path');

// myPath 接收三个参数
// myPath('x'),传入的是svg path中 x 的值
// myPath('y'),传入的是svg path中 y 的值
// myPath('angle'),传入的是svg path中 角度 的值
var path = anime.path('.motion-path-demo path');

anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

示例：

 效果：

 2、变形

给大家分享一个svg的绘制编辑器网页：

svg编辑器

 效果：就可以在页面看到动态的五边形

 3、划线

首先要有一个画好的svg的线，然后通过：

strokeDashoffset: [anime.setDashoffset, 0]

 来实现划线。

 效果：

笔记参考：https://www.jianshu.com/p/39fc8a837b31 

官方文档：https://animejs.com/documentation/#functionBasedParameters

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407230.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java二次开发海康SDK-对接门禁机

Java二次开发海康SDK-对接门禁机

写在最前SDK版本&#xff1a;CH-HCNetSDKV6.1.6.45_build20210302_win64参考文档&#xff1a;海康SDK使用手册_V6.1对接测试设备型号&#xff1a;DS-K1T671M设备序列号&#xff1a;E50247795业务目标使用门禁设备实现对人脸的抓拍&#xff0c;将抓拍的人脸与其对应的数据进行上…
阅读更多...
用Pytorch构建一个喵咪识别模型

用Pytorch构建一个喵咪识别模型

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 目录 一、前言 二、问题阐述及理论流程 2.1问题阐述 2.2猫咪图片识别原理 三、用PyTorch 实现 3.1PyTorch介绍 3.2PyTorch 构建模型的五要素 3.3PyTorch 实现的步骤 3.3.…
阅读更多...
重新学习Vue，了解一下Vue的故事和核心特点

重新学习Vue，了解一下Vue的故事和核心特点

vueVue的由来Vue是什么1.响应的数据绑定2.可组合视图组件3.虚拟DOM4.MVVM模式5.声明式渲染总结Vue的由来 大家应该都知道VUE是尤大大尤雨溪开发出来的&#xff0c;尤大大专业不是计算机&#xff0c;而是室内艺术专业。后来尤大大到帕森斯设计学院进修艺术研究硕士学位&#xf…
阅读更多...
猿创征文｜【HTML】标签学习之路

猿创征文｜【HTML】标签学习之路

&#x1f496;目录 一、HTML语法规范 1.基本语法概述 2.标签关系 二、HTML基本结构标签 1.第一个HTML页面 2.HTML基本结构标签总结 一、HTML语法规范 1.基本语法概述 html是由尖括号包围的关键词&#xff0c;列如&#xff1a;<html>。html标签通常是成对出现的&a…
阅读更多...
前端微信小程序开发基础

前端微信小程序开发基础

文章参考&#xff08;黑马小程序教学视频&#xff09;仅供参考与学习 简介 小程序和普通页面开发的区别 运行环境不同 网页运行在浏览器中&#xff0c;小程序运行在微信环境中 API不同 由于运行环境不同&#xff0c;所以小程序中&#xff0c;无法调用DOM和BOM的API. 但是…
阅读更多...
如何使用 CSS 使表格居中（快速指南）

如何使用 CSS 使表格居中（快速指南）

在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前&#xff0c;表格不仅仅用于以传统方式显示表格数据练习列表&#xff0c;而是更常用于控制完整的页面布局。 那时&#xff0c;HTML 表格用于定义网页的结构和视觉外观&#xff0c;其中表格的位置可以直接在 HTML 中指定…
阅读更多...
input详解之文件上传

input详解之文件上传

input 全部类型 常用的并且能为大多数浏览器所识别的类型大概有&#xff1a;text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 1、一般类型 <!-- text类型 文本框 默认…
阅读更多...
Vue2 Element DatePicker组件设置默认日期、控制日期范围

Vue2 Element DatePicker组件设置默认日期、控制日期范围

文章目录前言一、设置默认日期1.不要用placeholder2.设置动态的默认日期二、限制日期选取1.方案2.举例总结前言 以前都是做练习, 上周拿到这个任务直接被卡住… 一、设置默认日期 1.不要用placeholder 依然不使用placeholder属性, 在v-model初始就绑定了时间的情况下, 组件可…
阅读更多...
vue导入处理Excel表格详解

vue导入处理Excel表格详解

目录1. 前言2.vue导入Excel表格2.1 使用ElementUI中的upload组件2.2 使用input文件上传3. 总体代码与效果4. 总结1. 前言 最近遇到前端导入并处理excel表格的情况&#xff0c;趁此机会刚好研究一下vue导入并处理excel数据&#xff1b;当然自己手撸一个工具没有那么多时间&#…
阅读更多...
vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传

vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传

安装: 我用的是tinymce最新版本v6 npm install tinymce -S npm install tinymce/tinymce-vue -S 2.安装语言包:Language Packages | Trusted Rich Text Editor | TinyMCE 3.在项目public文件夹下--新建tinymce文件夹,安装包解压在该文件夹下 封装组件TEditor.vue <templa…
阅读更多...
微信小程序实现上拉加载下拉刷新（即粘即用）

微信小程序实现上拉加载下拉刷新（即粘即用）

前言 去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能&#xff0c;最近微信小程序中也用到了这个功能&#xff0c;下面一起来看看微信小程序中是怎么实现这个小功能的吧。 实现效果如下&#xff1a; 实现思路&#xff1a; 1. 首先需要在使用到的 json 文件下配置 "ena…
阅读更多...
vue项目遇见事件冒泡如何处理

vue项目遇见事件冒泡如何处理

开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图&#xff0c;当我们点击页面某个元素时&#xff0c;会产生点击事件&#xff0c;事件由外到内&#xff0c;逐层递进&#xff08;事件捕获阶段&#xff0c;途中的1->2->3->4&#xff09…
阅读更多...
DVWA靶场搭建

DVWA靶场搭建

1.靶场是什么&#xff0c;靶场的搭建 在学习web安全的过程中&#xff0c;靶场是必不可少的&#xff0c;毕竟在计算机界&#xff0c;任何理论知识都不如实操 靶场就是人为提供的带有安全漏洞的服务&#xff0c;每一个学习者都可以在本地快速搭建来实操&#xff0c;回溯漏洞的发…
阅读更多...
超好玩的js页面效果---实现数值的动态变化

超好玩的js页面效果---实现数值的动态变化

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…
阅读更多...
JS实战——轮播图

JS实战——轮播图

目录 一、轮播图介绍 二、原理 三、轮播图基本htm布局 四、轮播图CSS布局 五、轮播图JS布局 六、轮播图效果 一、轮播图介绍 现在我们在很多网站上都能看到轮播图&#xff0c;像某东、某宝、某猫等等大小型网站上都有应用。下面就是某宝上的轮播图样式。 二、原理 将一些图…
阅读更多...
【chatgpt谈前端三大主流框架】React、Vue和Angular的优缺点及如何选择

【chatgpt谈前端三大主流框架】React、Vue和Angular的优缺点及如何选择

文章目录React优点缺点Vue优点缺点Angular优点缺点总结chatgpt号称无所不能&#xff0c;今天我们就来考考他&#xff0c;让他来对比下React、Vue和Angular。下面是chatgpt全部回答&#xff0c;大家觉得他分析得对吗&#xff1f;React、Vue和Angular都是目前最流行的前端框架&am…
阅读更多...
【vue2】使用elementUI进行表单验证实操（附源码）

【vue2】使用elementUI进行表单验证实操（附源码）

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue使用elementUI进行表单验证实操&#xff08;附源码&#xff09; 【前言】我们在构建一…
阅读更多...
VUE 使用 vue create 命令 创建 vue2.0 项目

VUE 使用 vue create 命令 创建 vue2.0 项目

为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题&#xff0c;我们使用 管理员身份 打开命令行 第一步&#xff0c;打开命令行后&#xff0c;首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上…
阅读更多...
如何解决 npm 安装依赖报错 ERESOLVE unable to resolve dependency tree

如何解决 npm 安装依赖报错 ERESOLVE unable to resolve dependency tree

现代前端项目开发中依赖管理已经是不可或缺的一环&#xff0c;然后由于各种问题&#xff0c;如历史原因、项目缺少维护等&#xff0c;前端项目在依赖管理中会遇到非常多的问题。本篇文章讨论其中一种&#xff0c;当 npm install 时遇到报错 ERESOLVE unable to resolve depende…
阅读更多...
百度文心一言对标 ChatGPT，你怎么看？

百度文心一言对标 ChatGPT，你怎么看？

文心一言 VS ChatGPT接受不完美 期待进步里程碑意义文心一言初体验✔ 文学创作✔ 商业文案创作✔ 数理逻辑推算✔ 中文理解✔ 多模态生成写在最后何为文心&#xff1f;“文”就是我们中华语言文字中的文&#xff0c;“心”是希望该语言模型可以用心的去理解语言&#xff0c;用心…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023