JavaScript学习笔记 07、BOM元素(二)

简介: JavaScript学习笔记 07、BOM元素(二)

六、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>
相关文章
|
14天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
17天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
21天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
1月前
|
存储 算法 JavaScript
|
1月前
|
编解码 JavaScript 前端开发
JavaScript学习 --- BOM
JavaScript学习 --- BOM
11 0
|
1月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
6 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
16 0
|
1月前
|
存储 JSON JavaScript
JavaScript:BOM操作
JavaScript:BOM操作
30 1
|
1月前
|
JavaScript 前端开发 小程序
js将数组中相同的元素进行分组 必看
js将数组中相同的元素进行分组 必看

相关产品

  • 云迁移中心