页面特效&&本地存储-CFANZ编程社区

2.3 PC端网页特效

2.3.1 元素偏移量offset系列

1、作用：使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽高）
返回数值不带单位

2、offset系列常用属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素。如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

3、offset和style的区别

（1）offset

offset可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth等属性是只读属性，只能获取不能赋值
获取元素大小位置，用offset更合适

（2）style

style只能得到行内样式表中的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获取也可以赋值
给元素更改值，用style更合适

2.3.2 元素可视区client系列

1、作用：

使用client系列的相关属性获取元素可视区的相关信息

2、client系列属性

client系列属性	作用
element.clientTop	返回元素上边框大小
element.clientLeft	返回元素左边框大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

2.3.3 元素滚动scroll系列

1、作用：

使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

2、scroll系列属性

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

3、页面被卷去的头部

滚动条向下滚动时，页面上面的内容被隐藏，滚动条会触发onscroll事件

4、mouseenter和mouseover区别

（1）当鼠标移动到元素上时会触发事件

（2）mouseover鼠标经过自身盒子会触发，经过子盒子还会触发

（3）mouseenter只会经过自身盒子触发

（4）mouseenter不会冒泡

（5）鼠标离开mouseleave不会冒泡

2.3.4 动画函数封装

1、动画原理

获得盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

2、动画函数简单封装

注意：函数需要传递两个参数，动画对象和移动到的距离

//例子
<style>
    div{
        position: absolute;/* 加定位 */
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    span {
        position: absolute;/* 加定位 */
        left: 0;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
    }
</style>
<div></div>
<span></span>
<script>
    function animate(obj,target) {
        var timer = setInterval(function() {
            if(obj.offsetLeft >= target){
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
    }

    var div = document.querySelector('div');
    var span = document.querySelector('span');
    animate(div,400);
    animate(span,100);
</script>

3、动画函数给不同元素记录不同定时器

问题：不断点击按钮，速度会变快，开了太多定时器

解决：让元素只有一个定时器

<style>
    div{
        position: absolute;/* 加定位 */
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    span {
        position: absolute;/* 加定位 */
        left: 0;
        top: 200px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
    }
</style>

<button>点击</button>
<div></div>
<span></span>
<script>
    function animate(obj,target) {
    //先清除之前的定时器
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {//这里改成了对象去命名
            if(obj.offsetLeft >= target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
    }

    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
        animate(span,200);
    })
    animate(div,400);
</script>

4、缓动效果原理

让元素的速度有变化（不是一直匀速），速度慢慢停下来

（1）让盒子每次移动的距离慢慢变小，速度就慢慢降下来了

（2）算法：（目标值-现在的位置）/10作为每次移动的距离（步长）

（3）停止条件：让当前盒子的位置等于目标位置就停止定时器

//减速效果
<style>
    span {
        position: absolute;/* 加定位 */
        left: 0;
        top: 200px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
    }
</style>

<button class="btn1">点击距离200</button>
<button class="btn2">点击距离300</button>
<span></span>
<script>
    function animate(obj,target) {
    //先清除之前的定时器
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {//这里改成了对象去命名
            //步长值写到定时器里
            //将距离向上取整
            //可以正着走也可以倒着走
            //var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) :Math.floor(step);
                
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
            //将步长慢慢变小
            obj.style.left = obj.offsetLeft + step + 'px';
        },15);
    }

    var span = document.querySelector('span');
    var btn1 = document.querySelector('.btn1');
    var btn2 = document.querySelector('.btn2');
    btn1.addEventListener('click',function(){
        animate(span,200);
    });
    btn2.addEventListener('click',function(){
        animate(span,300);
    });
    
</script>

5、动画函数添加回调函数

回调函数写在定时器结束的位置

动画函数可以封装在JS文件中

//例子
//以上功能执行完变色

<style>
    span {
        position: absolute;/* 加定位 */
        left: 0;
        top: 200px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
    }
</style>

<button class="btn1">点击距离200</button>
<button class="btn2">点击距离300</button>
<span></span>
<script>
    function animate(obj,target,callback) {
    //先清除之前的定时器
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {//这里改成了对象去命名
            //步长值写到定时器里
            //将距离向上取整
            //可以正着走也可以倒着走
            //var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) :Math.floor(step);
                
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
                //回调函数
                if(callback){
                    //调用函数
                    callback();
                }
            }
            //将步长慢慢变小
            obj.style.left = obj.offsetLeft + step + 'px';
        },15);
    }

    var span = document.querySelector('span');
    var btn1 = document.querySelector('.btn1');
    var btn2 = document.querySelector('.btn2');
    btn1.addEventListener('click',function(){
       animate(span,200,function() {
           span.style.backgroundColor = 'orange';
       });
    });
    btn2.addEventListener('click',function(){
        animate(span,300,function() {
            span.style.backgroundColor = 'yellow';
        });
    });
    
</script>

6、节流阀

防止轮播图按钮连续点击造成播放过快

利用回调函数，使得上一个函数动画执行完在执行下一个

设置var flag = true；if(flag){flag = false;}当完成后flag = true;

2.4 移动端网页特效

2.4.1 触屏事件

1、触屏事件

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

2、触摸事件对象（TouchEvent）

targetTouches更常用

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

3、移动端拖动元素

（1）touchstart、touchmove、touchend可以实现拖动元素

（2）手指坐标值：targetTouches[0]里面的pageX和pageY

（3）原理：位置是：盒子原来的位置+手指移动的距离

（4）手指移动的距离=手指滑动中的位置-手指刚触摸时的位置

（5）注意：手指移动会发生滚动，这里要阻止默认的屏幕滚动e.preventDefault();

2.4.2 移动端常见特效

1、过渡：transition

检测过渡完成的事件：transitionend

2、classList属性

（1）是H5的属性，返回元素的类名

（2）该属性用于在元素中添加、移除和切换CSS类

添加类：element.classList.add('类名');
移除类：element.classList.remove('类名');
切换类：element.classList.toggle('类名');（有类名就删除，没有就添加）

3、click问题

问题：在移动端click有延时问题（300ms）

原因：移动端屏幕双击会缩放页面

解决方案：（1）禁用缩放：浏览器禁用双击缩放行为

<meta name="viewport" content="user-scalable=no">

（2）利用touch事件自己封装这个事件解决300ms延迟

当手指触摸屏幕记录时间
当手指离开屏幕记录时间
时间小于150ms且无滑动，则为点击

（3）使用插件：fastclick插件

2.4.3 移动端常见开发插件

1、fastclick插件：https://github.com/ftlabs/fastclick

2、Swiper插件（轮播滑动）：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

3、superslide：SuperSlide | TouchSlide 官方网站大话主席

4、iscroll:GitHub - cubiq/iscroll: Smooth scrolling for the web

2.5 本地存储

数据存储在浏览器中

2.5.1 window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下可以共享

3、以键值对的形式存储使用

4、运用

（1）存储数据：sessionStorage.setItem(key,value);

（2）获取数据：sessionStorage.getItem(key);

（3）删除数据：sessionStorage.removeItem(key);

（4）清空所有数据：sessionStorage.clear();

2.5.2 window.localStorage

1、生命周期永久生效，除非手动删除，否则关闭页面也存在

2、可以多窗口（页面）共享（同一浏览器共享）

3、以键值对的形式存储使用

4、运用

（1）存储数据：localStorage.setItem(key,value);

（2）获取数据：localStorage.getItem(key);

（3）删除数据：localStorage.removeItem(key);

（4）清空所有数据：localStorage.clear();