JS特效

1.PC端网页特效

　　1.1 offset

　　1.2 offset 与 style 区别

　　案例：获取鼠标在盒子内的坐标

　　1.3 元素可视区 client 系列

　　1.4元素 scroll 系列属性

　　页面被卷去的头部兼容性解决方案

　　总结

　　原生的动画函数封装animate.js

 　　原生JS轮播图

 

2.移动端网页特效

　　2.1 触屏事件

　　2.2 触摸事件对象（TouchEvent）

　　2.3 移动端拖动元素案例

　　2.4移动端轮播图js代码参考案例

　　2.5返回顶部案例

　　2.6常用开发插件 

 

1.PC端网页特效

1.1 offset

　　offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度高度）

注意： 返回的数值都不带单位

offset 系列常用属性：

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

 

 

1.2 offset 与 style 区别

offset

　　offset 可以得到任意样式表中的样式值 

　　offset 系列获得的数值是没有单位的 

　　offsetWidth 包含padding+border+width 

　　offsetWidth 等属性是只读属性，只能获取不能赋值

　　所以，我们想要获取元素大小位置，用offset更合适

style

　　style只能得到行内样式表中的样式值

　　style.width获得的是带有单位的字符串

　　style.width获得不包含padding和border的值

　　style.width是可读写属性,可以获取也可以赋值

　　所以,我们想要给元素更改值,则需要用style改变

 

案例：获取鼠标在盒子内的坐标

分析：

① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。

② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）

③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)

④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标

⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove

实现代码：

var box = document.querySelector('.box');
    box.addEventListener('mousemove', function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

 

1.3 元素可视区 client 系列

　　client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。

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

 

 

1.4元素 scroll 系列属性

       scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

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

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏 掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset

 

页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop

2. 未声明 DTD，使用 document.body.scrollTop

3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}

使用的时候 getScroll().left

 

总结

 

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、 内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框,返回数值不带单位

 

他们主要用法：

1. offset系列 经常用于获得元素位置 offsetLeft offsetTop

2. client 经常用于获取元素大小 clientWidth clientHeight

3. scroll 经常用于获取滚动距离 scrollTop scrollLeft

4. 注意页面滚动的距离通过 window.pageXOffset 获得

 

原生的动画函数封装animate.js

 

function animate(obj, target, callback) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

 

 JS原生轮播图

点击这里

 

2.移动端网页特效

2.1 触屏事件

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控 笔）对屏幕或者触控板操作。

常见的触屏事件如下：

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

 

2.2 触摸事件对象（TouchEvent）

　　TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

　　touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象重点我们看三个常见对象列表：

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

 

2.3 移动端拖动元素案例

分析：

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

2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY

3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置

注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0">
        <title>title>
        <style type="text/css">
            div{
                position: absolute;
                width: 100px;
                height: 100px;
                background: #0000FF;
            }
        style>
    head>
    <body>
        <div class="touch">触摸移动div>
        <script type="text/javascript">
            var touch = document.querySelector('.touch');
            var startX = 0; //手指初始位置
            var startY = 0;
            var x = 0; //盒子位置
            var y = 0;
            touch.addEventListener('touchstart', function(e){
                //获取手指初始位置
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
                //获取盒子位置
                x = this.offsetLeft;
                y = this.offsetTop;
            });
            touch.addEventListener('touchmove', function(e){
                //手指移动距离
                var moveX = e.targetTouches[0].pageX - startX;
                var moveY = e.targetTouches[0].pageY - startY;
                //设置盒子移动距离
                this.style.left = x + moveX + 'px';
                this.style.top = y + moveY + 'px';
                e.preventDefault();//清除默认滚动
            });
        script>
    body>
html>

Code

 

2.4移动端轮播图js代码参考案例

window.addEventListener('load', function() {
    //1.获取元素
    var focus = document.querySelector('.focus');//整个轮播图盒子
    var ul = focus.querySelector('ul');//轮播图列表
    var ol = focus.querySelector('ol');//轮播图小点
    //获得focus的宽度
    var w = focus.offsetWidth;

    //2.利用定时器进行播放
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    //过度完成后,再去判断
    ul.addEventListener('transitionend', function() {
        //无缝滚动
        index = index >= 3 ? 0 : (index < 0 ? 2 : index);
        var translateX = -index * w;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';

        //3.小圆圈跟着变化
        //去除小圆点带有current类
        ol.querySelector('.current').classList.remove('current');
        //让当前小圆点加上current
        ol.children[index].classList.add('current');
    })

    //4.手机滑动轮播图
    //手指初始位置
    var startX = 0;
    var moveX = 0; //移动的距离
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer); //停止轮播
    });
    //移动手指时移动轮播图
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;
        var translateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
    });
    //手指离开,根据移动判断回弹还是播放是上一张还是下一张
    ul.addEventListener('touchend', function(e) {
        if(flag){//如果有移动图片才重新计算
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    // 如果是左滑就是 播放下一张 moveX 是负值
                    index++;
                }
            }
        }
        var translateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        //重新开启自动播放
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    });
});

banner code

 

2.5返回顶部案例

    //返回顶部模块制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function(){
        if(window.pageYOffset >= nav.offsetTop){//当大与某个位置显示出来
            goBack.style.display = 'block';
        }else{
            goBack.style.display = 'none';
        }
    })
    goBack.addEventListener('click', function(){
        window.scroll(0,0);
    })

View Code

 

2.6常用开发插件

轮播图插件：

Swiper：https://www.swiper.com.cn/　

superslide : http://www.superslide2.com/
iscroll : https://github.com/cubiq/iscroll

 

兼容性较好的视频插件：

https://github.com/ireaderlab/zyMedia

 

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

 

插件的使用总结

1. 确认插件实现的功能

2. 去官网查看使用说明

3. 下载插件

4. 打开demo实例文件，查看需要引入的相关文件，并且引入

5. 复制demo实例文件中的结构html，样式css以及js代码