六、location(含案例)
查看location对象
window.location：标识当前所在网址，包含网址相关信息。
<script> console.log(window.location); </script>
实际小案例
①跳转网址：两种方式
window.location="https://www.baidu.com"
window.location.href="https://www.baidu.com"
②重新加载当前页面(使用函数)
window.location.reload(true);
③获取get请求查询参数：window.location.search
<body> <button id="mybutton">点我</button> <script> var m_button = document.getElementById("mybutton"); m_button.onclick = function () { console.log(window.location.search); } </script> </body>
七、BOM制作特效
7.1、认识offsetTop属性
offsetTop：DOM元素都有该睡醒，表示其元素的顶部到定位祖先元素的垂直距离。
定位祖先元素：在祖先节点中，离自己最近的且拥有定位属性的元素。
注意点：若是在项目想要确定某个楼层在页面中的位置就可以使用该属性来定位，但是需要确保祖先节点中没有定位元素。
测试源码：
<style> * { margin: 0; padding: 0; } div.box { width: 100px; height: 100px; border: 1px solid #000; padding: 40px; } div.box1 { position: relative; width: 100px; height: 100px; border: 1px solid #000; } p { background-color: red; } </style> <body> <div class="box"> <div class="box1"> <p id="mp">123</p> </div> </div> <script> var ele = document.getElementById("mp"); console.log(ele.offsetTop) </script> </body>
案例1：返回顶部按钮
预期效果：点击回到顶部，浏览器页面自动向上。
思路分析：利用定时器来进行动画效果的制作，控制scrollTop属性来进行回到顶部。
<style> body { font-size: 18px; height: 3000px; background-image: linear-gradient(145deg, red, orange, blue, gold); } a.scrollTop { position: fixed; bottom: 40px; right: 40px; width: 50px; height: 50px; border: 1px solid #000; background-color: grey; line-height: 25px; text-align: center; cursor: pointer; } </style> <body> <a class="scrollTop">回到顶部</a> <script> var m_box = document.getElementsByTagName("a")[0]; var myinterval; m_box.onclick = function () { clearInterval(myinterval); myinterval = setInterval(function () { document.documentElement.scrollTop -= 50; //到达最顶部需要清除定时器 if (document.documentElement.scrollTop < 2) { clearInterval(myinterval); } }, 20); } </script> </body>
案例2：楼层导航小效果
相关属性：
offsetTop：某个元素距离顶部的位置
document.documentElement.scrollTop：当前屏幕移动的高度。可进行修改设置。
实现效果说明：
点击右边的导航栏，点击哪个专栏屏幕就会到达指定位置。
效果第一部分思路：使用事件委托来给ul来添加单击事件，在对应li以及section的标签中存储了data-n="栏目信息"的键值对，用于点击时使用样式选择器来查找对应的section。接着来对屏幕当前高度进行指定值(通过对应section的距离顶部高度)就能够到达指定位置了。
鼠标向页面下面进行滚动，右边的小导航栏也会有效果表示在哪个区域。
效果第二部分思路：用一个数组来保存每个专栏的距底部位置，数组末尾再添加一个无限大。绑定页面滚动事件，通过滚动事件触发时获取到当前屏幕高度，遍历数组比对来得到是哪个栏目(cur_movfloor_pos保存第n个)，原本使用样式效果的第n个楼层存储到nav_bkred_pos，将原本导航栏目指定的样式去除，为当前到达的新栏目添加样式效果。
源码：
<style> * { margin: 0; padding: 0; height: 5000px; } div.box { width: 802px; overflow: hidden; border: 1px solid #000; margin: 10px auto; } div.box section { width: 800px; height: 600px; /* border: 1px solid #000; */ margin-bottom: 30px; background-color: rgb(134, 98, 98); } nav.navigater { position: fixed; top: 50%; right: 30px; margin-top: -90px; } nav.navigater ul { list-style: none; } nav.navigater ul li { width: 75px; height: 28px; border: 1px solid #000; text-align: center; line-height: 28px; background-color: yellow; } nav.navigater ul li.current { background-color: red; color: white; } </style> <body> <!-- 本案例位于：07的BOM元素中特效案例2 --> <div class="box"> <section data-n="体育">体育财经</section> <section data-n="动漫">动漫专区</section> <section data-n="电影">电影专区</section> <section data-n="小说">小说大全</section> <section data-n="影视">影视全集</section> <section data-n="纪录片">记录片</section> </div> <nav class="navigater"> <ul id="navlists"> <li data-n="体育" class="current">体育财经</li> <li data-n="动漫">动漫专区</li> <li data-n="电影">电影专区</li> <li data-n="小说">小说大全</li> <li data-n="影视">影视全集</li> <li data-n="纪录片">记录片</li> </ul> </nav> <script> var sec_lists = document.getElementsByTagName("section"); //js实现指定位置到指定位置的屏幕动态移动(有一些像素的偏差) // var myinterval;//定时器变量 // function scrollAtoB(current, target) { // if (current == target) // return; // var pos = 1;//1表示向下移动，-1表示向上移动 // if (current > target) { // pos = -1; // } // //设置定时器来进行动画移动 // myinterval = setInterval(() => { // current += pos * 8; // document.documentElement.scrollTop = current;//实际页面进行定位 // console.log(current); // if (Math.abs(current - target) <= 7) { // clearInterval(myinterval); // } // }, 1); // } //完成导航栏的点击效果 var nav_lists = document.getElementById("navlists"); //事件委托到ul元素 nav_lists.onclick = function (e) { ///确定li为源目标 if ((e.target.tagName).toLowerCase() == "li") { var targetSubName = e.target.getAttribute("data-n"); //根据导航栏中的data-n使用样式器找到指定section var targetSection = document.querySelector("div.box section[data-n='" + targetSubName + "']"); //直接让页面卷动到指定楼层的位置 document.documentElement.scrollTop = targetSection.offsetTop; //优化：到达指定楼层效果(暂时没做到) // scrollAtoB(document.documentElement.scrollTop, targetSection.offsetTop); } }; //数组中存储所有栏目的data-n var floorHeightArr = []; for (let i = 0; i < sec_lists.length; i++) { floorHeightArr.push(sec_lists[i].offsetTop - 1);//微调一些差错 //再推入一个无穷大(因为后面要对屏幕卷动高度进行比较在哪个楼层) if (i == sec_lists.length - 1) { floorHeightArr.push(Infinity); } } // alert(floorHeightArr); var nav_bkred_pos = 0;//原本导航栏为红的楼层,0表示第一个 var currnetScrollY;//当前页面滚动的高度 var cur_movfloor_pos;//当前页面移动到的位置 //页面滚动事件绑定 window.onscroll = function () { currnetScrollY = window.scrollY;//获取到当前屏幕的所处的高度 //比较当前屏幕处于的楼层位置 for (let i = 0; i < floorHeightArr.length - 1; i++) { if (currnetScrollY >= floorHeightArr[i] && currnetScrollY < floorHeightArr[i + 1]) { cur_movfloor_pos = i; //测试当前楼层的高度以及其应该在指定楼层的哪个区间 //console.log("currnetScrollY：" + currnetScrollY + " " + sec_lists[i].getAttribute("data-n") + "：" + floorHeightArr[i] + " " + (i == floorHeightArr.length - 2 ? "底楼：" : sec_lists[i + 1].getAttribute("data-n")) + "：" + floorHeightArr[i + 1]); break; } } // console.log("当前楼层：" + cur_movfloor_pos); //判断将要设置的楼层与现有的楼层是否一致，一致不需要设置，不一致要将原本楼层的样式删除，为新楼层添加 if (nav_bkred_pos != cur_movfloor_pos) { nav_lists.children[nav_bkred_pos].className = "";//原本指定楼层去除样式 nav_bkred_pos = cur_movfloor_pos;//重新赋值楼层 nav_lists.children[cur_movfloor_pos].className = "current";//为当前楼层设置指定样式 } } </script> </body>
