今日学习任务

  • [ ] 1.缓动动画经典案例

  • [x] (1)360开机动画

  • (2)手风琴

  • [ ] 2.三大家族及经典应用场景

  • [ ] (1)offset家族：获取元素自身真实宽高与位置

  • [ ] (2)scroll家族：获取元素内容真实宽高与位置

  • [ ] 经典场景：获取网页滚动距离(实现固定导航)

  • [ ] (3)client家族 : 获取元素可视区域大小

  • [ ] 经典场景：获取网页可视区域大小(实现响应式布局)

  • [x] 2.事件对象

  • [ ] (1)事件对象三大坐标系

  • (2)案例：div跟随鼠标移动
  • (3)获取事件触发点相对于元素自身位置
  • 3.经典案例:放大镜

01-动画经典案例

1.1-360开机动画

需求分析：点击关闭按钮

  1.       （1）下半部分往下缓动（从屏幕消失）
  3.       （2）整个盒子往右混动（从屏幕消失），需要等上一个动画结束之后执行

思路分析：事件三要素

  1.            1 获取元素：
  3.            2 注册事件：
  5.            3 事件处理：

效果预览

day06 - 图1

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title>静态文件</title>
  6.   <style>
  7.     .box {
  8.       /*width: 322px;*/
  9.       position: fixed;
  10.       bottom: 0;
  11.       right: 0;
  12.       overflow: hidden;
  13.     }
  15.     span {
  16.       position: absolute;
  17.       top: 0;
  18.       right: 0;
  19.       width: 30px;
  20.       height: 20px;
  21.       /*background-color: red;*/
  22.       cursor: pointer;
  23.     }
  24.   </style>
  26. </head>
  27. <body>
  28. <div class="box" id="box">
  29.   <span id="closeButton"></span>
  30.   <div class="hd" id="headPart">
  31.     <img src="images/t.jpg" alt=""/>
  32.   </div>
  33.   <div id="bottomPart" class="bd">
  34.     <img src="images/b.jpg" alt=""/>
  35.   </div>
  36. </div>
  38. <script src="animation.js"></script>
  39. <script>
  42.     /* 需求分析：点击关闭按钮
  43.           （1）下半部分往下缓动（从屏幕消失）
  44.           （2）整个盒子往右混动（从屏幕消失），需要等上一个动画结束之后执行
  45.          思路分析：事件三要素
  46.                1 获取元素：
  47.                2 注册事件：
  48.                3 事件处理：
  49.      */
  51.     //1. 获取元素：
  52.     let closeButton = document.getElementById('closeButton');
  53.     let box = document.getElementById('box');//整个盒子
  54.     let bottomPart = document.getElementById('bottomPart');//下半部分
  55.     //2.注册事件：
  56.     closeButton.onclick = function (  ) {
  57.         //3.事件处理：
  58.         animationSlow(bottomPart,{
  59.             height:0
  60.         },function (  ) {
  61.             animationSlow(box, {
  62.                 width:0
  63.             })
  64.         });
  65.     }
  66. </script>
  67. </body>
  68. </html>

1.2-手风琴

效果预览

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>动画-案例《手风琴》</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         ul {
  14.             list-style: none;
  15.             width: 2400px;
  16.         }
  18.         #box {
  19.             width: 1200px;
  20.             height: 400px;
  21.             border: 2px solid red;
  22.             margin: 100px auto;
  23.             overflow: hidden;
  24.         }
  26.         #box li {
  27.             width: 240px;
  28.             height: 400px;
  29.             float: left;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div id="box">
  36.         <ul>
  37.             <li><img src="images/1.jpg" alt=""></li>
  38.             <li><img src="images/2.jpg" alt=""></li>
  39.             <li><img src="images/3.jpg" alt=""></li>
  40.             <li><img src="images/4.jpg" alt=""></li>
  41.             <li><img src="images/5.jpg" alt=""></li>
  42.         </ul>
  43.     </div>
  45.     <script src="./animation.js"></script>
  46.     <script>
  48.         /*需求
  49.         (1):给每一个li设置鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100
  50.         (2):鼠标移出大盒子,所有的li的宽度都变成默认的240 
  51.          */
  53.         //1.获取元素
  54.         let box = document.querySelector('#box');
  55.         let liList = document.querySelectorAll('#box li');
  57.         //2.注册事件
  59.         //2.1 li元素注册鼠标移入事件
  60.         for (let i = 0; i < liList.length; i++) {
  61.             liList[i].onmouseover = function () {
  62.                 //3. 排他思想 
  63.                 for (let j = 0; j < liList.length; j++) {
  64.                     if (liList[j] == this) {
  65.                         animationSlow(liList[j], { width: 800 });
  66.                     } else {
  67.                         animationSlow(liList[j], { width: 100 });
  68.                     }
  69.                 }
  70.             };
  71.         };
  73.         //2.2 给box注册鼠标移出事件
  74.         box.onmouseout = function () {
  75.             for (let j = 0; j < liList.length; j++) {
  76.                 animationSlow(liList[j], { width: 240 });
  77.             };
  78.         };
  80.     </script>
  82. </body>
  84. </html>

02-三大家族(offset、scroll、client)

1.0-offset家族(元素自身大小)

offsetWidth：宽度，border（左右） + padding（左右）+content：getComputedStyle(元素)[width\border\padding]

offsetHeight：高度（与宽度逻辑一样）

offsetLeft：自己的border外部 到 定位父级 border的内部

offsetTop：与offsetLeft逻辑一样

offsetParent：定位父级

1.1-scroll家族（元素内容大小）

  • 1.offset家族：

    • offsetWidth、offsetHeight:获取元素自身的真实宽高(width+padding+border),不带单位，是number类型
    • offsetParent：获取一个元素的定位父级
    • offsetLeft、offsetTop:获取元素的外边框到定位父级的内边框的（左/上）距离

  • 2.scroll家族：（与offset家族类似，不带单位，number类型）

    • scrollWidth和scrollHeight：元素内容真实的宽高
    • scrollLeft和scrollTop：元素在滚动时超出内容区域的部分
    • onscroll:元素的滚动条事件，只要滚动就会触发

day06 - 图2)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         .one {
  8.             width: 200px;
  9.             height: 200px;
  10.             border: 1px solid #000;
  11.             /*设置auto可以添加滚动条，如果此时div没有设置宽高，就会变成和内容一样大小*/
  12.             overflow: auto;
  13.         }
  15.         img {
  16.             vertical-align: top;
  17.             /*width: 400px;*/
  18.             /*height: 400px;*/
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  25. <div class="one" id="box">
  26.     <img src="1.jpg" alt=""/>
  27. </div>
  29. </body>
  31. <script>
  32.     /**1.offset家族：
  33.             * offsetWidth、offsetHeight:获取元素自身的真实宽高(width+padding+border),不带单位，是number类型
  34.             * offsetParent：获取一个元素的定位父级
  35.             * offsetLeft、offsetTop:获取元素的外边框到定位父级的内边框的（左/上）距离
  36.      * 2.scroll家族：（与offset家族类似，不带单位，number类型）
  37.             * scrollWidth和scrollHeight：元素内容真实的宽高
  38.             * scrollLeft和scrollTop：元素在滚动时超出内容区域的部分
  39.             * onscroll:元素的滚动条事件，只要滚动就会触发
  40.      *
  41.      */
  43.     let box = document.getElementById('box');
  45.     console.log ( box.offsetWidth ,box.offsetHeight);//200,200  box自身的宽高
  48.     //给box添加滚动条事件
  49.     box.onscroll = function (  ) {
  50.         console.log ( box.scrollWidth ,box.scrollHeight);//box内容的真实宽高
  51.         // 内容区域 = 元素宽高 - 滚动条的宽度（17px）
  52.         console.log (box.scrollLeft,box.scrollTop  );//内容区域超出部分
  53.     }
  54. </script>
  55. </html>

1.2-获取网页滚动距离

本小节知识点

  • 1.获取页面的HTML元素和body元素

    • HTML:document.documentElement;
    • body: document.body;

  • 2.获取整个页面的滚动事件：window.onscroll

    • 没有兼容性

  • 3.获取页面的scrollTop和scrollLeft:存在浏览器兼容性

    • 谷歌/火狐 ： window.pageXOffset （左） window. pageYOffset（上）
    • IE浏览器： document.documentElement.scrollLeft/Top
    • 某些浏览器:document.body.scrollLeft/Top
  • 4.封装一个获取页面滚出去距离的浏览器兼容性函数：利用逻辑或的短路
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  8.         body{
  9.             width: 2000px;
  10.             height: 2000px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  16. </body>
  18. <script>
  19.     /*本小节知识点
  20.     1.如果获取页面的HTML元素和body元素
  21.         * HTML:document.documentElement;
  22.         * body: document.body;
  23.     2.获取整个页面的滚动事件：window.onscroll
  24.         * 没有兼容性
  25.     3.获取页面的scrollTop和scrollLeft:存在浏览器兼容性
  26.         * 谷歌/火狐 ： window.pageXOffset （左）    window. pageYOffset（上）
  27.         * IE浏览器： document.documentElement.scrollLeft/Top
  28.         * 某些情况下(把<!DOCTYPE html>删掉):document.body.scrollLeft/Top
  29.     4.封装一个获取页面滚出去距离的浏览器兼容性函数：利用逻辑或的短路
  30.      */
  32.     //1.获取界面的HTML和body及docuemnt
  33.     let html = document.documentElement;
  34.     let body = document.body;
  36.     //2.页面滚动事件
  37.     window.onscroll = function (  ) {
  38.         console.log ( getScroll ().scrollLeft, getScroll ().scrollTop );
  39.     }
  41.     //3.获取界面滚出去距离的兼容性封装（这个函数放到common.js文件名中以后会用到）
  42.     function getPageScroll (  ) {
  43.         let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
  44.         let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  45.         return {
  46.             scrollLeft : scrollLeft,//左边是对象属性名，右边是属性值
  47.             scrollTop : scrollTop
  48.         }
  49.     }
  52. </script>
  53. </html>

1.3-案例：固定导航

  • 需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部

  • 思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位

    • 通过改变类名即可改变样式

效果预览

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0
  10.         }
  12.         .top {
  13.             height: 168px;
  14.         }
  16.         img {
  17.             vertical-align: top;
  18.         }
  20.         .main {
  21.             margin: 0 auto;
  22.             width: 1000px;
  23.             margin-top: 10px;
  24.         }
  26.         .fixed {
  27.             position: fixed;
  28.             top: 0;
  29.             left: 0;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  36. <div class="top" id="topPart">
  37.     <img id="pic" src="images/top.png" alt=""/>
  38. </div>
  40. <div class="nav" id="navBar">
  41.     <img src="images/nav.png" alt=""/>
  42. </div>
  44. <div class="main" id="mainPart">
  45.     <img src="images/main.png" alt=""/>
  46. </div>
  47. </body>
  49. <script>
  50.     /*需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部
  51.     * 思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位
  52.             * 通过改变类名即可改变样式
  53.      */
  54.     //1.获取元素
  55.     let topPart = document.getElementById("topPart");
  56.     let navBar = document.getElementById("navBar");
  57.     let mainPart = document.getElementById("mainPart");
  59.     //获取上面那部分的高度。
  60.     let topPartHeight = topPart.offsetHeight;
  62.     //2.给页面一个滚动事件
  63.     window.onscroll = function () {
  64.         //2.1 先获取页面滚动的scrollTop
  65.         let top1 = getPageScroll().scrollTop;
  66.         //2.2 如果滚出去 的高度大于第一部分的高，就应该把中间的导航条给固定住。
  67.         if(top1 >= topPartHeight){
  68.             navBar.setAttribute("class","fixed");
  69.             //导航部分设置为固定定位后不占据标准流，会把main顶上去
  70.             //为了防止main突然顶上去造成顿闪，可以给main的margin-top加上导航栏的高度
  71.             mainPart.style.marginTop = navBar.offsetHeight + 10 + "px";
  72.         }else {
  73.             //如果滚回去了，就修改导航部分为之前的样式
  74.             navBar.setAttribute("class","nav");
  75.             //导航部分取消了固定定位,需要将main部分的margin-top修改为原来的高度
  76.            mainPart.style.marginTop =  10 + "px";
  77.         }
  78.     }
  80.     //获取页面的scrollTop的值封装函数
  81.     function getPageScroll(){
  82.         return {
  83.             scrollTop : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
  84.             scrollLeft :  window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
  85.         };
  86.     }
  87. </script>
  88. </html>

1.4-client家族（元素可视区域大小）

client家族：

  • clientWidth/clientHeight：获取可视区域的宽高（padding+content）
  • clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top

day06 - 图3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     #box{
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 5px solid black;
  12.         padding: 5px;
  13.         background-color: red;
  14.         border-left: 10px solid black;
  15.         border-top: 20px solid blue;
  16.         /*overflow: auto;*/
  17.     }
  18. </style>
  20. <body>
  22. <div id="box">
  23.     <!--<img src="1.jpg" alt="">-->
  24. </div>
  26. </body>
  28. <script>
  30. /*client家族：
  31.     * clientWidth/clientHeight：获取可视区域的宽高(可视内容的宽高 + padding)
  32.     * clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top
  34.  */
  36. let box = document.getElementById('box');
  38. console.log ( box.clientWidth, box.clientHeight );//
  39. console.log ( box.clientLeft, box.clientTop );//
  41. box.onscroll = function (  ) {
  42.     console.log ( box.clientWidth, box.clientHeight );//
  43.     console.log ( box.clientLeft, box.clientTop );//
  44. }
  46. </script>
  48. </html>

1.5-获取网页可视区域大小

本小节知识点

  • 1.监听浏览器窗口变化的事件: window.onresize()

  • 2.获取页面的可视区域

    • 存在浏览器兼容问题，兼容情况与scroll家族基本类似
    • 谷歌/火狐 ： window.innerWidth window. innerHeight
    • IE浏览器： document.documentElement.clientWidth/Height
    • 某些情况下(把删掉):document.body.clientWidth/Height
  • 3.封装一个获取页面的可视区域大小
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. </body>
  11. <script>
  12.     /**本小节知识点
  13.      * 1.监听浏览器窗口变化的事件: window.onresize()
  15.      * 2.获取页面的可视区域
  16.             *存在浏览器兼容问题，兼容情况与scroll家族基本类似
  17.             * 谷歌/火狐 ： window.innerWidth     window. innerHeight
  18.             * IE浏览器： document.documentElement.clientWidth/Height
  19.             * 某些情况下(把<!DOCTYPE html>删掉):document.body.clientWidth/Height
  20.      * 3.封装一个获取页面的可视区域大小
  21.      *
  22.      */
  24.     //1.监听浏览器窗口发生变化
  25.     window.onresize = function (  ) {
  26.         console.log ( getClientSize().clientWidth,getClientSize().clientHeight );//
  27.     }
  29.     //2.封装浏览器兼容函数获取界面可视区域
  30.     getClientSize = function (  ) {
  31.         return {
  32.             clientWidth : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
  33.             clientHeight : window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0,
  34.     }
  35.     }
  36. </script>
  37. </html>

1.6-响应式布局原理介绍

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  8. <style>
  9.     body{
  10.         background-color: red;
  11.     }
  13. </style>
  14. <body>
  16. </body>
  18. <script src="common.js"></script>
  19. <script>
  20.     /*1.响应式布局：一个网站可以兼容多个终端
  21.      2.响应式布局原理：监听浏览器窗口的变化，根据窗口的大小变化来改变我们界面的布局
  22.      */
  25.     window.onresize = function (  ) {
  26.         //PC端监听窗口变化
  27.         let width = innerWidth;
  28.         if(width >= 1000){
  29.             document.body.style.backgroundColor = 'red';
  30.         }else if(width >= 600){
  31.             document.body.style.backgroundColor = 'green';
  32.         }else {
  33.             document.body.style.backgroundColor = 'hotpink';
  34.         };
  36.         //移动端监听横竖屏切换
  37.         let orientation = innerWidth > innerHeight ? '横屏' : '竖屏';
  38.         console.log(orientation);
  40.     };
  42. </script>
  43. </html>

03-事件对象

1.1-事件对象介绍（获取事件对象）

  • 1.什么是事件对象event:当某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息， 例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等 浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象

  • 2.如何获取事件对象：只需要在事件函数中添加一个参数即可

    • 我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数，浏览器调用这个函数的时候 会传递一个参数给你，这个参数就是事件对象

    • 事件对象的获取存在浏览器兼容性问题

      • 谷歌、火狐：随便写一个形参即可（通常要么是event要么是e）
      • IE8及之前：只能用window.event获取
      • 解决方案： e = e || window.event
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  8. <style>
  9.     #box{
  10.         width: 200px;
  11.         height: 200px;
  12.         background:red;
  13.     }
  14. </style>
  15. <body>
  17. <button id="box"></button>
  18. </body>
  20. <script>
  21.     /*1.什么是事件对象event:当某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息，
  22.     例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等
  23.     浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象
  25.     2.如何获取事件对象：只需要在事件函数中添加一个参数即可
  26.         * 我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数，浏览器调用这个函数的时候
  27.      会传递一个参数给你，这个参数就是事件对象
  28.         * 事件对象的获取存在浏览器兼容性问题
  29.             * 谷歌、火狐：随便写一个形参即可（通常要么是event要么是e）
  30.             * IE8及之前：只能用window.event获取
  31.             * 解决方案：  e = e || window.event
  32.      */
  34.     //我们在注册事件的时候，给我们的函数添加一个参数即可
  35.     //触发事件时，浏览器会调用我们的函数，此时会把事件对象传递给我们，我们只需要写一个形参接收即可
  36.     //原则上，函数的形参可以随便乱写，一般这个形参我们习惯上用event或者e
  37.     document.getElementById('box').onclick = function ( e ) {
  38.         //IE8及之前用window.event获取，可以用逻辑或的短路运算解决浏览器兼容性问题
  39.         e = e || window.event;
  40.         console.log ( e );
  41.         console.log ( e.altKey );//点击的时候有没有按住alert键
  43.     }
  44. </script>
  45. </html>

1.2-事件对象三大坐标系

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         * {
  8.             padding:  0;
  9.             margin:  0;
  10.         }
  11.         body {
  12.             width: 2000px;
  13.             height: 2000px;
  14.         }
  15.         .one {
  16.             width: 200px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             position: absolute;
  20.             top: 100px;
  21.             left: 100px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26. <div class="one" id="box"></div>
  27. <script>
  28.     //offset家族  offsetLeft  offsetTop  offsetHeight  offsetWidth
  29.     //scroll家族  scrollTop scrollLeft  scrollWidth  scrollHeight
  30.     //client家族  clientWidth  clientHeight
  33.     //事件对象里面的常用的三个坐标
  34.     let box = document.getElementById("box");
  35.     box.onclick = function (e) {
  36.         e = e || window.event;
  37.         //1.电脑屏幕的左上角，距离你触发事件的那一点的x值和y值。
  38.         console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
  39.         //2.浏览器可视区域，距离触发事件的那一点的x值和y值
  40.         console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
  41.         //3.页面的左上角（哪怕页面滚走了，还是页面左上角），距离触发事件的那一点的x值和y值。
  42.         //浏览器兼容问题：IE8及之前不支持
  43.         console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);
  45.         console.log ( getPagePoint ( e ).pageX, getPagePoint ( e ).pageY );
  46.     }
  48.     //pageX和pageY的兼容
  49.     //pageX/Y坐标系相对于页面左上角，实际上就是界面滚定出去的距离 + 可视区域的距离
  50.     function getPagePoint ( e ) {
  51.         e = e || window.event;//事件对象兼容
  52.         return {
  53.             pageX : e.pageX || getPageScroll().scrollLeft + e.clientX,
  54.             pageY : e.pageY || getPageScroll().scrollTop + e.clientY,
  55.         };
  56.     };
  57. </script>
  58. </body>
  59. </html>

1.3-案例：天使跟你飞

  • 需求分析：移动鼠标，改变图片的位置

  • 思路分析：

    • 1.监听鼠标在网页的移动事件 网页：window 鼠标移动：onmousemove
    • 2.让图片的位置与事件对象的触发点位置一直 界面元素定位 相对于 页面的左上角距离
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7.     <style>
  8.         body {
  9.             width: 3000px;
  10.             height: 3000px;
  11.         }
  13.         img {
  14.             position: absolute;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  20. <img src="tianshi.gif" alt="" id="img"/>
  22. </body>
  23. </html>
  26. <script>
  27.     /*需求分析：移动鼠标，改变图片的位置
  28.     思路分析：1.监听鼠标在网页的移动事件     网页：window   鼠标移动：onmousemove
  29.     2.让图片的位置与事件对象的触发点位置一直    界面元素定位 相对于 页面的左上角距离
  31.      */
  33.     //获取图片
  34.     let img = document.getElementById("img");
  36.     //1.在网页里移动，2.onmousemove
  38.     window.onmousemove = function (e) {
  40.         e = e || window.event;//事件对象兼容
  42.         //获取鼠标移动的位置
  43.         img.style.left = getPagePoint(e).pageX + "px";
  44.         img.style.top = getPagePoint(e).pageY + "px";
  46.     }
  47. </script>

1.4-案例：div跟随鼠标移动(鼠标在div中心)

效果预览

  • 本小节知识点：监听页面鼠标移动

    • 1.window.onmousemove():IE8及以下不支持
    • 2.document.onmousemove():所有浏览器通用
  • 监听浏览器窗口变化：window.onresize() 所有浏览器通用的
  • 默认定位是以元素左上角，如果希望鼠标在元素中心，则应该往左和上分别偏移宽度和高度的一半
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7.     <style>
  8.         #box {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: red;
  12.             position: absolute;
  13.             left: 0;
  14.             top: 0;
  15.             padding: 50px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div id="box"></div>
  21. </body>
  23. <script>
  25. /*本小节知识点：监听页面鼠标移动
  26. 1.window.onmousemove():IE8及以下不支持
  27. 2.document.onmousemove():所有浏览器通用
  29. 监听浏览器窗口变化：window.onresize() 所有浏览器通用的
  30.  */
  32.     let box = document.getElementById("box");
  34.     //IE8不支持的
  35.     //    window.onmousemove = function(){
  36.     //
  37.     //        console.log("....");
  38.     //    }
  40.     //所有浏览器通用的
  41.     document.onmousemove = function (e) {
  43.         e = e || window.event;
  45.         //IE8不支持
  46. //        console.log(e.pageX, e.pageY);
  48.         //如果要让鼠标居中，那么还要往左边走宽度一半以及往上边走高度一半
  49.         box.style.left = getPagePoint(e).pageX - box.offsetWidth / 2 + "px";
  50.         box.style.top = getPagePoint(e).pageY - box.offsetHeight / 2 + "px";
  52.     }
  54. </script>
  56. </html>

1.5-获取事件触发点相对于元素位置01

day06 - 图4)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7.     <style>
  9.         #box {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: pink;
  13.             margin: 100px auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  20. <div id="box"></div>
  22. </body>
  24. <script>
  25.     let box = document.getElementById('box');
  27.     box.onclick = function(e){
  28.         e = e || window.event;
  29.         //蓝线 = 红线(e.pageX) - 绿线(this.offsetLeft)
  30.         let x = e.pageX - this.offsetLeft;
  31.         let y = e.pageY - this.offsetTop;
  33.         box.innerText = 'x:' + x + 'y:' + y;
  34.     };
  35. </script>
  36. </html>

1.6-获取事件触发点相对于元素位置02

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         .father {
  8.             width: 300px;
  9.             height: 300px;
  10.             border: 20px solid #000;
  11.             background-color: green;
  12.             margin: 50px auto;
  13.             overflow: hidden;
  14.             position: relative;
  15.             left: 0px;
  16.             top: 0px;
  17.         }
  18.         .one {
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: pink;
  22.             margin: 100px auto;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="father" id="father">
  28.     <div class="one" id="box"></div>
  29. </div>
  31. <script>
  32.     let box = document.getElementById('box');
  34.     box.onclick = function(e){
  35.         e = e || window.event;
  36.         //蓝线 = 红线(e.apgeX) -绿线（this.parentNode.offsetLeft） - 白线(this.parentNode.clientLeft) - 黄线(this.offsetLeft)
  37.         let x = e.pageX - this.parentNode.offsetLeft - this.parentNode.clientLeft - this.offsetLeft; 
  38.         let y = e.pageY - this.parentNode.offsetTop - this.parentNode.clientTop - this.offsetTop; 
  39.         box.innerText = 'x' + x + 'y' + y;
  40.     };
  41. </script>
  42. </body>
  43. </html>

04-经典案例:放大镜

效果预览

day06 - 图5

需求分析

  • 1.小图片鼠标移入时:出现遮罩层，并将遮罩部分放大在右边显示

  • 2.小图片鼠标移动时：遮罩层与大图片相应移动

    • 2.1：鼠标在遮罩层中心位置
    • 2.2：遮罩层边界检测，遮罩层不能超出图片范围
    • 2.3：遮罩层与大图片相应移动 假如 遮罩层大小50px 50px 大图片100px 100px,那么每当遮罩层鼠标移动1px，大图片应该移动2px。（100/50）
  • 3.小图片鼠标移出时：遮罩层与大图片隐藏
  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  13.     .box {
  14.       width: 350px;
  15.       height: 350px;
  16.       margin: 100px;
  17.       border: 1px solid #ccc;
  18.       position: relative;
  19.     }
  21.     .big {
  22.       width: 400px;
  23.       height: 400px;
  24.       position: absolute;
  25.       top: 0;
  26.       left: 360px;
  27.       border: 1px solid #ccc;
  28.       overflow: hidden;
  29.       display: none;
  30.     }
  32.     .mask {
  33.       width: 175px;
  34.       height: 175px;
  35.       background: rgba(255, 255, 0, 0.4);
  36.       position: absolute;
  37.       top: 0;
  38.       left: 0;
  39.       cursor: move;
  40.       display: none;
  41.     }
  43.     .small {
  44.       position: relative;
  45.     }
  47.     .box img {
  48.       vertical-align: top;
  49.     }
  51.     #bigBox>img {
  52.       /*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
  53.       position: absolute;
  54.     }
  55.   </style>
  57. </head>
  59. <body>
  60.   <div class="box" id="box">
  61.     <div class="small" id="smallBox">
  62.       <img src="images/001.jpg" width="350" alt="" />
  64.       <div class="mask" id="mask"></div>
  65.     </div>
  66.     <div class="big" id="bigBox">
  67.       <img id="bigImg" src="images/0001.jpg" width="800" alt="" />
  68.     </div>
  69.   </div>
  71.   <script>
  72.     /*
  73.     1.分析需求(交互)：
  74.       (1)small盒子  鼠标移入/移出：  显示/隐藏 遮罩层mask和大盒子big
  75.       (2)small盒子  移动
  76.         * 1.mask跟随鼠标移动
  77.         * 2.鼠标再mask中心
  78.         * 3.mask只能在small盒子中移动（边界检测）
  79.         * 4.big盒子中的图片相应移动
  80.           * 假如mask大小100*100，big大小事200*200，鼠标每移动1px，图片移动 1px * 200/100 = 2px
  81.     2.思路分析（事件三要素）
  82.       获取元素：事件源：
  83.       注册事件：事件类型
  84.       事件处理：
  85.     */
  87.     //1.获取元素
  88.     let smallBox = document.getElementById('smallBox');//小盒子
  89.     let bigBox = document.getElementById('bigBox');//大盒子
  90.     let mask = document.getElementById('mask');//遮罩
  91.     let bigImg = document.getElementById('bigImg');//大盒子图片
  92.     let box = document.getElementById('box');//最外面大盒子 （box.offsetLeft到body的距离）
  93.     //2.注册事件
  96.     //2.1 small盒子  鼠标移入
  97.     smallBox.onmouseover = function () {
  98.       //3.事件处理
  99.       bigBox.style.display = 'block';
  100.       mask.style.display = 'block';
  101.     };
  103.     //2.2 small盒子  鼠标移出
  104.     smallBox.onmouseout = function () {
  105.       //3.事件处理
  106.       bigBox.style.display = 'none';
  107.       mask.style.display = 'none';
  108.     };
  110.     //2.3 small盒子  鼠标移动
  111.     smallBox.onmousemove = function (e) {
  112.       e = e || window.event;
  113.       //* 1.mask跟随鼠标移动
  114.       //蓝线 = 红线(e.pageX)-绿线(box.offsetLeft)
  115.       let x = e.pageX - box.offsetLeft;
  116.       let y = e.pageY - box.offsetTop;
  117.       //* 2.鼠标再mask中心
  118.       x -= mask.offsetWidth / 2;
  119.       y -= mask.offsetHeight / 2;
  120.       //* 3.mask只能在small盒子中移动（边界检测）
  121.       /* 
  122.         0 <= x <= small盒子宽度350 - mask宽度175 = 175
  123.         0 <= y <= 350-175 = 175
  124.       */
  125.       x = x <= 0 ? 0 : x;
  126.       x = x >= 175?175:x;
  127.       y = y <= 0 ? 0 : y;
  128.       y = y >= 175?175:y;
  129.       mask.style.left = x + 'px';
  130.       mask.style.top = y + 'px';
  131.       //* 4.big盒子中的图片相应移动
  132.       bigImg.style.left = -x * (bigImg.offsetWidth - bigBox.offsetWidth)/(smallBox.offsetWidth - mask.offsetWidth) + 'px';
  133.       bigImg.style.top = -y * (bigImg.offsetHeight - bigBox.offsetHeight)/(smallBox.offsetHeight - mask.offsetHeight)+ 'px';
  134.     };
  135.   </script>
  136. </body>
  139. </html>