web前端总结-js（10）

学习目标：

1.offset系列
2.动画实现原理
3.简单动画封装函数
4.给不同对象添加不同的定时器
5.缓动动画
6.回调函数
7.引用animate动画函数
8.常见的网页特效案例
9.轮播图制作
10.筋斗云案例

学习内容：

1.offset系列
1)offset得到的是元素的偏移位置，返回不带单位的数值
2）它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，以body为准
3）返回的元素的大小，宽度，高度，是包含padding+border+width的值
4)offsetParent返回的是带有定位的父亲，否则返回body
5)parentNode返回最近一级的父亲，不管有没有定位。

   <script>
        //offset系列
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        console.log();
        //可以得到元素的偏移位置，返回不带单位的数值
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        //它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，以body为准
        console.log(son.offsetLeft);
        //湖片区元素的大小，宽度，高度 是包含padding+border+width
        var w = document.querySelector('.w')
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        //返回带有定位的父亲，否则返回body
        console.log(son.offsetParent);
        console.log(song.parentNode);//返回最近一级的父亲，不管有没有定位
    </script>

2.动画实现原理
1)获取当前位置
2）让移动物体在当前位置加一移动距离
3）利用setInterval定时器重复执行步骤，加一个停止判断条件
4）元素需要添加一个定位，才能使用element.style.left属性

 <script>
        //动画原理
        //1.获取当前位置
        //2.让盒子在当前位置加1移动距离
        //3.利用定时器不断重复此操作
        //4.加一个结束操作
        //5.注意元素需要添加定位，才能使用element。style。left
        var div = document.querySelector('div')
        var timer = setInterval(function () {
            if (div.offsetLeft >= 400) {
                //停止动画本质是停止定时骑
                clearInterval(timer)
            }
            div.style.left = div.offsetLeft + 1 + 'px'
        }, 30)
    </script>

3.简单动画封装函数
1）目标对象obj，targer目标位置

<script>
        var span = document.querySelector('span')
        var div = document.querySelector('div')
        //目标对象obj，targer目标位置
        function animate(obj, target) {
            var timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    //停止动画本质是停止定时骑
                    clearInterval(timer)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px'
            }, 30)
        }
        animate(div, 300)   
    </script>

4.给不同对象添加不同的定时器
1）目标对象obj，targer目标位置
2）给不同元素指定了不同定时器

<script>
        var span = document.querySelector('span')
        var div = document.querySelector('div')
        //目标对象obj，targer目标位置
        //给不同元素指定了不同的定时器
        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)
        }
        animate(div, 400)
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            animate(span, 200)
        })

    </script>

5.缓动动画
1)缓动动画就是将每次动画移动步长慢慢变小（目标值-当前距离）/10

   <script>
        var span = document.querySelector('span')
        //目标对象obj，targer目标位置
        //给不同元素指定了不同的定时器
        function animate(obj, target) {
            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)
                }
                //每次加一这个步长改为慢慢变小的。（目标值-当前距离）/10
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 15)
        }
        var btn500 = document.querySelector('.btn500')
        var btn800 = document.querySelector('.btn800')
        btn500.addEventListener('click', function () {
            animate(span, 500)
        })
        btn800.addEventListener('click', function () {
            animate(span, 800)
        })

    </script>

6.回调函数
1)回调函数写到定时器结束里面

 <script>
        var span = document.querySelector('span')
        //目标对象obj，targer目标位置
        //给不同元素指定了不同的定时器
        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)
                    //回调函数写到定时器结束里面
                    if (callback) {
                        callback()
                    }
                }
                //每次加一这个步长改为慢慢变小的。（目标值-当前距离）/10
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 15)
        }
        var btn500 = document.querySelector('.btn500')
        var btn800 = document.querySelector('.btn800')

        btn500.addEventListener('click', function () {
            animate(span, 500)
        })
        btn800.addEventListener('click', function () {
            animate(span, 800, function () {
                span.style.backgroundColor = 'pink'
            })
        })
    </script>

7.引用animate动画函数
1)animate封装为动画函数，包含移动元素，移动距离，回调函数

<script>
        var sliderbar = document.querySelector('.sliderbar')
        var con = document.querySelector('.con')
        //当鼠标经过sliderbar就会让con盒子滑动到左侧
        //当鼠标利尻ssliderbar就会让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 = '⬅'
            })
        })
    </script>

9.轮播图制作

window.addEventListener('load', function () {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标经过focus就显示隐藏左右按键
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block'
        clearInterval(timer)
        timer = null
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none'
        timer = setInterval(function () {
            //手动点击事件执行
            arrow_r.click()
        }, 1000)
    })
    var ul = focus.querySelector('ul')
    //  console.log(ul.children.length);
    var ol = focus.querySelector('.circle')
    var focusWidth = focus.offsetWidth
    for (var i = 0; i < ul.children.length; i++) {
        //创建li
        var li = document.createElement('li')
        //设置小圆圈的索引号 自定义属性
        li.setAttribute('index', i)
        //插入
        ol.appendChild(li)
        //生成li时候就利用排他思想，
        li.addEventListener('click', function () {
            //干掉所有人 清除所有current类名

            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            //留下我自己 当前li设置current
            this.className = 'current'
            //5.点击小圆圈移动图片，移动ul
            //ul的移动距离就是li的索引号乘以图片宽度
            //当我们点击了某个li，拿到li索引号

            var index = this.getAttribute('index')
            animate(ul, -index * focusWidth)
            //当我们点击了li，就把li的索引号给num
            num = index
            circle = index
        })
    }
    // 把ol第一个小li设为类名current
    ol.children[0].className = 'current'
    //7.克隆第一章图片，放到ul最后面
    //6.点击右侧按钮，图片滚动一张
    //cloneNode（）true深克隆包含子节点，
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)

    var num = 0
    var circle = 0
    var flag = true
    //circle控制小圆圈变化，先清除其他小圆圈类名
    arrow_r.addEventListener('click', function () {
        //如果走到最后复制的一张图片，left快速回0
        if (flag) {
            flag = false
            if (num == ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++
            animate(ul, -num * focusWidth, function () {
                flag = true
            })
            circle++
            if (circle == ol.children.length) {
                circle = 0
            }
            circleChange()
        }

    })
    //左侧按钮
    arrow_l.addEventListener('click', function () {
        //如果走到最后复制的一张图片，left快速回0

        if (flag) {
            flag = false
            if (num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * focusWidth + 'px'
            }
            num--
            animate(ul, -num * focusWidth, function () {
                flag = true
            })
            circle--
            //如果circle<0:说明第一张图片要改为第四个小圆圈
            if (circle < 0) {
                circle = ol.children.length - 1
            }
            circleChange()
        }

    })
    function circleChange() {
        //先清除其他小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        //留下当前的小圆圈的current类名
        ol.children[circle].className = 'current'
    }
    //10.自动播放轮播图
    var timer = setInterval(function () {
        //手动点击事件执行
        arrow_r.click()
    }, 1000)
})

10.筋斗云案例

<script>
        window.addEventListener('load', function () {
            var cloud = document.querySelector('.cloud')
            var c_nav = document.querySelector('.c-nav')
            var lis = c_nav.querySelectorAll('li')
            //2.给li绑定事件
            var current = 0
            for (var i = 0; i < lis.length; i++) {
                lis[i].addEventListener('mouseenter', function () {
                    animate(cloud, this.offsetLeft)
                })
                //鼠标离开就复原为0
                lis[i].addEventListener('mouseleave', function () {
                    animate(cloud, current)
                })
                lis[i].addEventListener('click', function () {
                    current = this.offsetLeft
                })
            }
        })
    </script>

学习时间：

提示：这里可以添加计划学习的时间
例如：
1、 周一至周五晚上 7 点—晚上9点
2、 周六上午 9 点-上午 11 点
3、 周日下午 3 点-下午 6 点

---

学习产出：

提示：这里统计学习计划的总量
例如：
1、 技术笔记 2 遍
2、CSDN 技术博客 3 篇
3、 学习的 vlog 视频 1 个