一.offset 偏移量

1.使用offest系列相关属性可以动态的得到该元素的位置(偏移),大小等

2.常见属性：如果父元素没定位，以下方法就针对于body而论

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

3.offset和style的区别：

（1）offset：主要用于获得元素的大小位置

  • 可以得到任意样式表中的样式
  • 获得的数值无单位
  • offsetWidth为只读属性，不能赋值
  • offsetWidth包含padding，border，width

（2）style：主要用于给元素更改值

  • style只能得到行内样式表中的样式
  • style.width获得的是带有单位的字符串
  • style.width获得的值不包含padding和border
  • style.width是可读写属性，可以获取也可以赋值

（3）点击弹出登录框(可拖动)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     body,html {
  10.         height: 100%;
  11.         width: 100%;
  12.     }
  13.     .mask {
  14.          opacity: 0.6;
  15.          z-index: -11;
  16.          filter: Alpha;
  17.          width: 100%;
  18.          height: 100%;
  19.          margin: 0;
  20.          padding: 0;
  21.          background-color: none;
  22.     }
  24.     .box {
  25.         width: 30%;
  26.         height: 30%;
  27.         background-color: black;
  28.         position: absolute;
  29.         top: 50%;
  30.         left: 50%;
  31.         transform: translate(-50%,-50%);
  32.         display: none;
  33.         cursor: move;
  34.     }
  36.     .title {
  37.         width: 100%;
  38.         height: 50%;
  39.         background-color: red;
  40.     }
  41. </style>
  42. <body>
  43.     <div class="mask">
  44.     <div class="box">
  45.         <div class="title">
  47.         </div>
  48.         <button id=closebtn>关闭</button>
  49.     </div>
  50.     <div class="link">点击登录</div>
  51.     </div>
  54.     <script>
  55.         var mask = document.querySelector(".mask");
  56.         var closebtn = document.querySelector("#closebtn");
  57.         var box = document.querySelector(".box");
  58.         var link = document.querySelector(".link");
  59.         var title = document.querySelector(".title");
  61.         link.addEventListener('click',function(e){
  62.             mask.style.background = "rgba(1,1,1,.2)";
  63.             box.style.display = "block";
  64.         })
  65.         closebtn.addEventListener('click',function(e){
  66.             mask.style.background = "none";
  67.             box.style.display = "none";
  68.         })
  70.         title.addEventListener('mousedown',function(e){
  71.             var x = e.pageX - box.offsetLeft;
  72.             var y = e.pageY - box.offsetTop;
  74.             document.addEventListener('mousemove',move)  
  75.             function move(e) {
  76.                 box.style.left = e.pageX - x +'px';
  77.                 box.style.top = e.pageY - y + 'px';
  78.             }
  79.             document.addEventListener('mouseup',function(){
  80.                 document.removeEventListener('mousemove',move);
  81.             })
  82.         })
  83.         </script>
  84. </body>
  85. </html>

案例：仿淘宝放大镜

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.       }
  14.       .preview_img {
  15.           position: relative;
  16.           width: 352px;
  17.           height: 451px;
  18.           border: 1px solid #ccc;
  19.           margin:20px 50px ;
  20.       }
  21.       .mask {
  22.           display: none;
  23.           position: absolute;
  24.           top: 0;
  25.           left:0;
  26.           width: 200px;
  27.           height: 200px;
  28.           background-color: #FEDE4F;
  29.           opacity: 0.3;
  30.       }
  31.       .big {
  32.           display: none;
  33.           position: absolute;
  34.           top:20px;
  35.           left:412px ;
  36.           width: 352px;
  37.           height: 451px;
  38.           border: 1px solid #ccc;
  39.           overflow: hidden;
  40.       }
  41.       .big .big_img {
  42.           position: absolute;
  43.           top:0;
  44.           left: 0;
  45.       }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="preview_img">
  50.         <img src="./th.jpg" alt="">
  51.         <div class="mask"></div>
  52.    </div>
  53.    <div class="big">
  54.         <img src="./th (1).jpg" alt="" class="big_img">
  55.    </div>
  56.    <script>
  57.         var preview_img = document.querySelector('.preview_img');
  58.         var mask = document.querySelector('.mask');
  59.         var big = document.querySelector('.big');
  60.         var big_img = document.querySelector('.big_img');
  62.         preview_img.addEventListener('mouseover',function(){
  63.             mask.style.display = 'block';
  64.             big.style.display = 'block';
  65.         })
  66.         preview_img.addEventListener('mouseout',function(){
  67.             mask.style.display = 'none';
  68.             big.style.display = 'none';
  69.         })
  70.         preview_img.addEventListener('mousemove',function(e){
  72.             var mouseX = e.pageX ;
  73.             var mouseY = e.pageY ;
  76.             var boxLeft = preview_img.offsetLeft ;
  77.             var boxTop = preview_img.offsetTop ;
  79.             var x = mouseX - boxLeft ;
  80.             var y = mouseY - boxTop ;
  83.             var moveX = x - mask.offsetLeft/2 ;
  84.             var moveY = y - mask.offsetHeight/2;
  86.             if( moveX <= 0){
  87.                 moveX = 0 ;
  88.             }else if( moveX >= preview_img.offsetWidth-mask.offsetWidth){
  89.                 moveX = preview_img.offsetWidth-mask.offsetWidth;
  90.             }
  92.             if( moveY <= 0){
  93.                 moveY = 0 ;
  94.             }else if ( moveY >= preview_img.offsetHeight-mask.offsetHeight){
  95.                 moveY = preview_img.offsetHeight-mask.offsetHeight;
  96.             }
  98.             mask.style.top = moveY + 'px' ;
  99.             mask.style.left = moveX + 'px' ;
  102.             var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
  103.             var maskMaxY = preview_img.offsetHeight - mask.offsetHeight ;
  105.             var bigImgMaxX = big_img.offsetWidth - big.offsetWidth ;
  106.             var bigImgMaxY = big_img.offsetHeight - big.offsetHeight ;
  108.             var bigX = moveX * bigImgMaxX / maskMaxX ;
  109.             var bigY = moveY * bigImgMaxY / maskMaxY ;
  111.             big_img.style.left = -bigX+'px';
  112.             big_img.style.top = -bigY +'px';
  114.         })
  116.    </script>
  117. </body>
  118. </html>

二.client 元素可视区

1.使用client相关属性可以获取元素可视区的相关信息，通过client相关属性可以动态的获得元素的边框大小，元素大学等

2.client相关属性：

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

3.立即执行函数：

（1）不用调用，立即执行
（2）写法：(function(){})() 或者 (function(){}())

三.scroll 元素滚动

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

2.scroll相关属性：

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

3.页面的滚动距离通过window.pageXoffset获得

四.动画函数封装

1.概述：

（1）动画实现原理：通过定时器setInterval()不断移动盒子位置
（2）利用定时器重复操作记得加结束条件
（3）给元素添加定位才能使用element.style.left

2.动画函数：

（1）把动画封装成函数，增高复用性
（2）注意传入两个参数，动画对象和移动到的距离
（3）平移函数：

  1. function animate(obj,target){
  2.   var timer = setInterval(function(){
  3.     if(obj.opffsetLeft >= target){
  4.       clearInterval(timer);
  5.     }
  6.     obj.style.left = obj.offsetLeft + 1 + 'px';
  7.   },30)
  8. }
  9. animate(div,300);