程序员书籍笔记 程序员书籍笔记
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

    • es6

      • es6基础
      • es5的扩展
      • let和const命令
    • 基础
    • 运算符和数组
    • 函数
    • 对象和类型
    • 数据类型
    • js接口
    • DOM案例
    • 节点操作
    • BOM接口
    • 页面操作
    • 动画和轮播图
      • 缓动画
      • 轮播图
      • 节流阀
      • 移动端动画
        • 触摸事件
      • 移动端轮播图
        • classList
    • 本地存储
    • js面向对象
    • es6
    • ES6
    • js面向对象1
    • js面向对象2
    • js面向对象3
  • GO

  • 正则表达式

  • java

  • TypeScript

  • react

  • 前端知识

  • jQuery

  • Python

  • C和C++

  • 前端和后端
  • JavaScript
yuadh
2022-02-03
目录

动画和轮播图

# 缓动画

缓动画就是让元素运动熟读有所变化,最常见的就是让动画慢慢停下来

算法其一:(目标值-现在的位置)/ 10 = 移动的位置

停止的条件:当前的位置 = 目标的位置

实现

var step = (target - obj.offsetLeft) / 10

function animate(obj,target){
    clearInterval(obj.timer);
    var step = (target - obj.offsetLeft) / 10
    obj.timer = setInterval(function(){
    	if(obj.offsetLeft >= target){
       		clearInterval(timer);
   		}
    	obj.style.left = div.offsetLeft + stpe +'px';
	},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
animate(div,250);
btn.addEventListener('click',function(){
    animate(span,300);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意

在此移动过程中 可能会出现有小数的情况,在来回的切换取整中:整数向上取,整数向下取

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step):Math.floor(step);
1
2

给动画添加回调函数

function animate(obj,target,callback){
    clearInterval(obj.timer);
    var step = (target - obj.offsetLeft) / 10
    obj.timer = setInterval(function(){
    	if(obj.offsetLeft >= target){
       		clearInterval(timer);
            if(callback){
               callback();
            }
   		}
    	obj.style.left = div.offsetLeft + stpe +'px';
	},30);
}
//使用
var sliderbar = document.querySelector('.slierbar');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function(){
        sliderbar.children[0].innerHTML = '->';
    })
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function(){
        sliderbar.children[0].innerHTML = '<-';
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 轮播图

# 节流阀

概念:当上一个函数动画内容执行完毕,再去执行下一个动画,让事件无法连续触发

实现:利用回调函数,添加一个变量来控制,锁住函数和解锁函数

var flag = true;
if(flag){
   	flag = false;
    ...
    animate(obj,target,function(){
        flag = true;
    });
}
//逻辑中断 替换代码
===========
if(callback){
   callback();
}
===========
callback&&callback();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 移动端动画

# 触摸事件

触屏touch事件 说明
touchstart 触摸到一个 DOM 元素时触发
touchmove 在一个 DOM 元素上滑动触发
touchend 从一个 DOM 元素上移动时触发

触摸事件对象(TouchEvent)

触摸列表 说明
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前 DOM 元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表,从无到有,从有到无

# 移动端轮播图

# classList

元素类操作对象

方法 说明
classList.add(x) 添加类名
classList.remove(x) 删除类名
classList.toggle(x) 有类名删除类名,没有类名添加此类名
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
页面操作
本地存储

← 页面操作 本地存储→

Theme by Vdoing | Copyright © 2021-2023 yuadh
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×