JavaScript--offset、client、scroll、立即执行函数、动画函数

本文来自pink老师视频，并作为自己的学习笔记

---

一、偏移量offset

注意：offsetParent和parentNode都可以取到父节点，但是parentNode取到亲爸爸，offsetParent取到有定位的父亲或者body

1. offset与style区别
   

二、元素可视区client

三、立即执行函数

不需要调用，立即能自己执行

1. 两种写法

可以传参

(function (形参){
    
    })(实参);

或

(function (形参){
    
    }(实参));

立即执行函数：独立作用域

2. pageshow

根据persisted判断是否缓存取过来的页面

四、元素滚动scroll

五、三大系列的区别

六、mouseenter、mouseover

七、动画函数封装

1. 简单封装

参数：目标对象、目标位置

2. 缓动动画

3. 多个目标值之间移动

4. 案例：轮播图

• 案例分析
  滚动思想:移动图片(浮动在一行的li)的父元素ul,通过图片序号*盒子宽度设置ul动画移动目标位置；
  无缝滑动思想:克隆第一个图appendchild添加到末尾,当定位到第一个图时，都赋值定位到最后一个图片元素；
  圆点click事件: 通过图片个数createElement(‘li’)，添加圆点，通过点击parentNode.children[i]事件，对应添加排他事件；
  右箭头click事件:通过向左移动ul（负数），声明num，动态同步index，num++,circle++；
  左箭头click事件:通过向右移动ul，声明num，动态同步index，num–,circle–；
  自动调用事件:通过setInterval(function(){},2000)定时调用右箭头arrowr.click()事件；
  鼠标经过与否事件:箭头隐藏（display）与否，监听mouseenter事件清除函数，监听mouseleave事件激活。
• 代码

window.addEventListener('load',function(){
    
    
    //显示左右剪号
    var arrowl=this.document.querySelector('.arrow-l');
    var arrowr=this.document.querySelector('.arrow-r');
    var focus=this.document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;

    focus.addEventListener('mouseenter',function(){
    
    
        arrowl.style.display='block';
        arrowr.style.display='block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave',function(){
    
    
        arrowl.style.display='none';
        arrowr.style.display='none';
        timer = setInterval(function(){
    
    
            arrowr.click();
        },2000);
    })
    //动态创建圆点  添加index元素、事件
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // console.log(ul.children.length);  
    for (var i=0;i<ul.children.length;i++){
    
    
        var li = this.document.createElement('li');
        ol.appendChild(li);
        //添加索引属性
        li.setAttribute('index',i);
        
        li.addEventListener('click',function(){
    
    
            //排他思想
            for(var i=0;i<ol.children.length;i++){
    
    
                ol.children[i].className='';
            }
            this.className='current';
            var index =this.getAttribute('index');
            /* 使circle和arrowr点击事件同步
            全局变量，变量提升 */
            num = circle = index;
            console.log(index);
            console.log(focusWidth);
            //加了定位的元素才能使用动画
            animate(ul,-index*focusWidth);
        })
    }
    //克隆节点  true表示深度克隆，在园点后面克隆不影响圆点个数
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //添加arrowr事件
    var num=0;
    // 控制小圆随着arrowl和arrowr一起定位
    /* 如果arrowr点击事件是循环，是通过计算循环体中的历史变量来控制ul动画
    而circle使用添加index和parentNode.children[index]绑定得到ul动画
    导致arrowr点击事件和circle点击事件是没有关系的两个个体，
    从而出现，arrowr使用错误的历史值计算动画
     */
    var circle = 0;
    arrowr.addEventListener("click",function(){
    
    
        if(num==ul.children.length-1){
    
    
            ul.style.left=0;
            num=0;
        }
            num++;
            animate(ul,-num*focusWidth);
            circle++;
            /* if (circle==ol.children.length)
            {
                circle=0;
            } */
            circle = circle==ol.children.length ? 0:circle;
            circleChange(circle);
    })
    arrowl.addEventListener('click',function(){
    
    
        if(num==0){
    
    
            num=ul.children.length-1;
            ul.style.left=-num*focusWidth+'px';
        }
        num--;
        animate(ul,-num*focusWidth);
        circle--;
        circle = circle < 0 ? ol.children.length-1 : circle;
        circleChange(circle);
    })
    function circleChange(circle){
    
    
        for(var i=0;i<ol.children.length;i++){
    
    
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    }
    var timer = this.setInterval(function(){
    
    
        // 两秒后调用点击事件，用时间手动调用click事件
        arrowr.click();
    },2000)
})