WEB API 五

一 元素偏移量 offset系列
   1 offsetLeft 和 offsetTop获取元素偏移 
     如何返回元素相对带有定位父元素上方的偏移？             offsetTop
     如何返回元素相对带有定位父元素左边框的偏移？           offsetLeft
   2 offsetWidth和offsetHeight获取元素大小
     1 如何返回自身包括padding，边框，内容区的宽度？            offsetWidth  不带单位
     2 如何返回自身包括padding，边框，内容区的高度？            offsetHeight  不带单位
     3 如何返回元素带有定位的父级元素？      offsetParent 如果父级都没有定位则返回body
     4 offsetParent和parentNode有什么区别？
        offsetParent只返回带有定位父级元素,而parentNode直接返回父级元素 不考虑父级是否带有定位
    3 offset与style区别
        offset
        offset 可以得到任意样式表中的样式值
        offset 系列获得的数值是没有单位的
        offsetWidth 包含 padding + border + width
        offsetWidth 等属性是只读属性 只能获取不能赋值
        ◉ 所以,我们想要获取元素大小位置 用offset更合适
        
        style
        style 只能得到行内样式表中的样式值
        style.width 得到的是带有单位的字符串
        style.width 获得不包含padding 和border 的值
        style.width 是可读写属性 可以获取也可以赋值
        ◉ 所以我们想要给元素更改值 则需要用style改变
      4 获取鼠标在盒子内的坐标 
        1 获取鼠标在盒子内坐标的核心思路是什么？
           用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标
        2 如何监听鼠标移动事件 ？         mousemove

      5  拖拽盒子
            // 提取一个专门用来设置拖拽的函数
			// 参数需要一个拖拽的元素
			function drag(obj) {
				obj.onmousedown =  function(e) {
					// 设置obj 捕获所有鼠标按下的事件
					// setCapture()
					//		只有IE支持 但是在火狐中调用不会报错
					//			二如果使用chrome调用会报错
					// 当鼠标松开时 取消对事件的捕获 对付IE8
					// if (obj.setCapture()) {
					// 	obj.setCapture();
					// }
					obj.setCapture && obj.setCapture();
					// div 的遍历量
					e = e || window.e;
					var x = e.pageX - obj.offsetLeft;
					var y = e.pageY - obj.offsetTop;
					// 为obj 绑定一个鼠标按下事件
					//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
					document.onmousemove = function(e) {
						// 获取鼠标的坐标
						e = e || window.e;
						obj.style.left =e.pageX - x + 'px';
						obj.style.top =e.pageY - y + 'px';
					};
					document.onmouseup = function() {
						// 当鼠标松开时 被拖拽元素固定在当前位置 onmouseup
						// 取消document的onmousemove事件
						document.onmousemove = null;
						// 取消document.onmouseup
						document.onmouseup = null;
						// 当鼠标松开时 取消对事件的捕获 对付IE8
						obj.setCapture && obj.setCapture();
						
					}
				// 当我们拖拽一个网页中的内容时 浏览器会默认去搜索引擎中搜索内容
				// 	此时会导致拖拽功能的异常 这个是浏览器的默认行为
				// 	如果不希望发生这个行为则可以通过 return false
				
				// 但是这招对 IE8 不起作用
				
				return false;
				};
			}
        6 仿京东放大镜效果
            window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview_img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
            preview_img.addEventListener('mouseover', function() {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
        preview_img.addEventListener('mousemove', function(e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

三 元素可视区 client系列 
    1 client系列
        clientWidth与offsetWidth最大的区别是什么？
            clientWidth 不包含边框
    2 立即执行函数 
        (function() {} ());
        (function() {})();
       立即执行函数如何传参？
        (function (a, b) {
            console.log(a + b)
   
         })(1, 2) // 第二个小括号可以看做是调用函数
     3 立即执行函数的最大作用是什么？
        创建了一个独立的作用域 避免了命名冲突的问题
       17-淘宝flexibleJS源码分析之pageshow事件
        pageShow事件有什么作用？    这个事件在页面显示时触发，无论页面是否来自缓存
四 元素滚动 scroll系列
     1 scroll系列
        SCROLL系列属性
        element.scrollTop  返回被卷去的上侧距离 返回数值不带单位
        element.scrollLeft  返回卷去的左侧距离 返回数值不带单位
        element.scrollWidth 返回自身实际的宽度 不含边框 返回数值不带单位
        element.scrollHeight 返回自身实际的高度 不含边框 返回数值不带单位
    如何监听元素的滚动事件？        scroll
    2 仿淘宝固定侧边栏（上）
        window.pageYOffset有什么含义？  页面被卷去的头部
      仿淘宝固定侧边栏（下）
        返回顶部按钮显示和隐藏
    3-三大系列总结
        offsetWidth，clientWidth，scrollWidth有什么区别？
        element.offsetWidth 返回自身包括padding、边框、内容的宽度 返回数值不带单位
        element.clientWidth  返回自身包括padding、内容区的宽度，不含边框 返回数值不带单位
        element.scrollWidth  返回自身实际的宽度 不含边框 返回数值不带单位

    4 mouseover和mouseenter区别
        1 mouseover和mouseenter有什么区别？
         mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
         mouseenter  只会经过自身盒子触发
        2 mouseenter一般和谁搭配使用？
         mouseleave
        3 mouseover一般和谁搭配使用？
         mouseout
        4 mouseenter有没有事件冒泡？
          没有
五 动画原理 
    动画的核心实现原理是什么？ 
        通过定时器 setInterval() 不断移动盒子位置
    简单动画函数封装
    动画函数 给不同元素记录不同定时器 
     如何确保每个元素都有自己的定时器？ 
        吧定时器对象挂在到元素的属性上
     如何确保按钮频繁点击 动画速度不会越来越快？
        每次启动新的定时器之间 吧上一次的清除掉