动画和轮播图

# 缓动画

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

算法其一：（目标值-现在的位置）/ 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)	有类名删除类名，没有类名添加此类名

编辑

上次更新: 2023/02/07, 14:51:48

← 页面操作本地存储→