1.1 offsett 概述 使用offset系列相关属性可以动态的得到该元素的位置、大小等。
element.offsetParent——返回作为该元素有定位的父级元素，否则返回bodyelement.offsetTop——返回元素相对带有定位父元素上方的偏移element.offsentLeft——返回元素相对带有定位父元素左边框的偏移element.offsetWidth——返回自身包括paddind、边框、内容区的宽度、返回数值不带单位element.offsetHeight——返回自身包括paddind、边框、内容区的高度、返回数值不带单位1.2 offset 与 style 的区别 1.3 仿京东放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="放大镜效果.css"> <script src='放大镜效果.js'></script> </head> <body> <div class="wrap"> <div class="img"> <img src="jackson.jpg" alt=""> <div class="mask"></div> </div> <div class="big"> <img src="jackson1.jpg" alt="" class='bigImg'> </div> </div> </body> </html> .wrap { width: 460px; height: 800px; } .img { position: relative; height: 450px; border: 1px solid #ccc; } .mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: #FEDE4F; opacity: .5; border: 1px solid #ccc; cursor: move; } .big { display: none; position: absolute; left: 470px; top: 0; width: 600px; height: 600px; border: 1px solid #ccc; overflow: hidden; } .big img { position: absolute; top: 0; left: 0; } window.addEventListener('load', function() { var img = document.querySelector('.img'); var mask = document.querySelector('.mask'); var big = document.querySelector('.big'); img.addEventListener('mouseover', function() { mask.style.display = 'block'; big.style.display = 'block'; }) img.addEventListener('mouseout', function() { mask.style.display = 'none'; big.style.display = 'none'; }) img.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // console.log(x, y); var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; var maskMax = 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'; var bigImg = document.querySelector('.bigImg'); var bigMax = bigImg.offsetWidth - big.offsetWidth; var bigX = maskX * bigMax / maskMax; var bigY = maskY * bigMax / maskMax; bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }) })效果图：
client 概述：使用client系列相关属性可以动态的得到该元素的位置、大小等。
element.clientTop——返回元素上边框的大小element.clientLeft——返回元素左边框的大小element.clientWidth——返回自身包括paddind、内容区的宽度，不含边框，返回数值不带单位element.clientHeight——返回自身包括paddind、内容区的高度不含边框，返回数值不带单位3.1 scroll 概述：动态得到该元素的大小、滚动距离等。
element.scrollTop——返回被卷去的上侧距离，返回数值不带单位element.scrollLeft——返回被卷去的左侧距离，返回数值不带单位element.scrollWidth——返回自身实际的宽度，不含边框，返回数值不带单位element.scrollHeight——返回自身实际的高度，不含边框，返回数值不带单位3.2 仿淘宝固定侧边栏案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="仿淘宝固定侧边栏.css"> <script src="仿淘宝固定侧边栏.js"></script> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> </body> </html> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: purple; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: pink; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } window.addEventListener('load', function() { var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); var bannerTop = banner.offsetTop; var sliderbarTop = sliderbar.offsetTop - bannerTop; var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; document.addEventListener('scroll', function() { // console.log(window.pageYOffset); if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = 300 + 'px'; } if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) })注意：页面滚动的距离通过 window.pageXOffset 获得。
4.1 动画原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤： 1、获得盒子当前位置 2、让盒子在当前位置加上1个移动距离 3、利用定时器不断重复这个操作 4、加一个结束定时器的条件 5、注意要添加定位，才能使用element.style.left
4.2 动画函数简单封装
函数需要传递两个参数：动画对象、移动到的距离。 例如： function animate( obj, target) { 动画行为 } animate( div, 300);
后面再补写 5.1 轮播图案例 5.2 返回顶部案例 5.3 筋斗云案例
