网页交互

• offset
• client
• scroll

offset

偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置、大小等

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

offset与style的区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式中的样式值
获得的数值是没有单位的	获得的是带有单位的字符串
width包含 padding + border +width	width不包含 padding 和 border 的值
获取元素大小位置，用offset更合适	改变元素值，使用style更合适

盒子内坐标点案例

var box = document.querySelector('.box');
box.addEventListener('click',function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
})

JD遮罩案例

window.onload = function() {
    // 仿照放大效果
    // part 1 遮罩跟随鼠标移动
    //console.log();
    var show = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var bigshow = document.querySelector('.big');
    //禁止定势思维
    show.addEventListener('mouseover', function(e) {
        mask.style.display = 'block';
        bigshow.style.display = 'block';
    })
    show.addEventListener('mousemove', function(e) {
        //获得鼠标离盒子的距离
        var boxX = e.pageX - this.offsetLeft;
        var boxY = e.pageY - this.offsetTop;
        //让mask的中央跟随鼠标
        var maskX = boxX - mask.offsetWidth / 2;
        var maskY = boxY - mask.offsetHeight / 2;
        //禁止 mask 超出盒子范围
        var maxWidth = show.offsetWidth - mask.offsetWidth;
        if (maskX < 0) {
            maskX = 0;
        } else if (maskX > maxWidth) {
            maskX = maxWidth;
        }
        if (maskY < 0) {
            maskY = 0;
        } else if (maskY > maxWidth) {
            maskY = maxWidth;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        //放大显示图片跟随 小图片一同显示
        //大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        var bigimg = document.querySelector('.bigImg');
        var bigMax = bigimg.offsetWidth - bigshow.offsetWidth;
        var showX = maskX * bigMax / maxWidth;
        var showY = maskY * bigMax / maxWidth;
        bigimg.style.left = -showX + 'px';
        bigimg.style.top = -showY + 'px';


    })
    show.addEventListener('mouseout', function(e) {
        mask.style.display = 'none';
        bigshow.style.display = 'none';
    })
}

client

通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

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

源码解析

scroll

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

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

固定导航案例

 //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

mouseenter和mouseover

mouseenter ：鼠标经过自身盒子会触发

mouseover：鼠标经过自身盒子，经过子盒子会触发

缓动画

实现

var div = document.querySelector('div');
var timer = setInterval(function(){
    if(div.offsetLeft > =233){
       clearInterval(timer);
    }
    div.style.left = div.offsetLeft + 1 +'px';
},30);

对其进行简单封装

function animate(obj,target){
    var timer = setInterval(function(){
    	if(obj.offsetLeft >= target){
       		clearInterval(timer);
   		}
    	obj.style.left = div.offsetLeft + 1 +'px';
	},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
animate(div,250);
animate(span,300);

继续优化

//按钮控制 不同对象添加不同定时器

function animate(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    	if(obj.offsetLeft >= target){
       		clearInterval(timer);
   		}
    	obj.style.left = div.offsetLeft + 1 +'px';
	},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
animate(div,250);
btn.addEventListener('click',function(){
    animate(span,300);
});

立即执行函数

写法1 (function(){...})()

写法2 (function(){...}())

(function(a,b){
    console.log(a+b);
})(2,3);
(function sum(a,b){
    console.log(a+b);
}(2,3))