js插件收藏

素材代码

https://www.dowebok.com/

1.js滚动插件

liMarquee – jQuery无缝滚动插件 www.dowebok.com/188.html

jQuery Scrollbox 图片文字滚动插件 https://www.jq22.com/jquery-info1890

滚屏 https://www.jq22.com/jquery-info1124

2.函数库

Lodash（推荐）:https://www.lodashjs.com/

3.动画库

Animate.css :http://www.animate.net.cn/

CSS3 动画库，也是目前最通用的动画库。

4.消息通知

Notyf：
简单的响应式纯js消息通知插件
http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html

5.视频播放器

Chimee http://chimee.org/

6.day.js日期插件

https://dayjs.fenxianglu.cn/

Moment.js

Moment.js是一个轻量级的js时间处理类库，其使用简单，方便了日常开发中对时间的操作，提高了开发效率。
http://momentjs.cn/

7.flv.js直播

8.Animate.css

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

基本用法

<h1 class="animate__animated animate__bounce">An animated element</h1>

import ‘animate.css’
复制代码

9.animejs

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

基本用法

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>

import anime from 'animejs/lib/anime.es.js'

// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})

复制代码

Gsap补间动画

https://www.tweenmax.com.cn/start/init/

demo

//=====================================设置动画=============================
//改cube.position属性 x 从0 移动到5的位置 持续5秒
var animate1 = gsap.to(cube.position, {
  x: 5,//0-5
  duration: 5, //持续5秒
  //repeat:2,//动画重复2次 加上第一次初始化 是3次 ,无限次循环设置-1
  repeat: -1,
  yoyo: true,//往返运动
  delay: 2,//延迟2秒运动
  ease: "power1.inOut",
  onComplete: () => {
    console.log("动画完成的回调函数")
  },
  onStart: () => {
    console.log("动画开始的回调函数")
  }
})
//旋转
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" })

window.addEventListener("dblclick", function () {
  //判断是否在动画状态
  if (animate1.isActive()) {
    //双击暂停动画
    animate1.pause()
  }else{
    //恢复动画
    animate1.resume()
  }

})