jQuery（五）元素的尺寸、位置和页面滚动事件

最新推荐文章于 2022-03-25 11:18:54 发布

码界索隆

最新推荐文章于 2022-03-25 11:18:54 发布

阅读量179

点赞数

文章标签： jquery javascript css3

本文链接：https://blog.csdn.net/cool66boy/article/details/123410831

版权

文章目录

尺寸相关、滚动事件
练习
- 加入购物车动画
- 置顶菜单（包含悬浮置顶按钮）

尺寸相关、滚动事件

获取和设置元素的尺寸
1).width()、height() //获取元素width和height
2).innerWidth()、innerHeight() //包括padding的width和height
3).outerWidth()、outerheigth() //包括padding和border的width和height
4).outerWidth(true)、outerHeight(true) //包括padding和border以及margin的width和height
获取元素相对页面的绝对位置
offset()
获取浏览器可视区的宽度和高度
$(window).width();
$(window).heigth();
获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
页面滚动事件

$(windwo).scroll(function(){
....
})

练习

加入购物车动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            var $point = $('.red_point');
            var $btn = $('input');
            var iNum = $('.num');
            var $box = $('.box');
            $btn.click(function(){
                $point.show();
                var $point_top = $point.css('top');
                var $point_left = $point.css('left');
                //改变红点的left、top值来实现动画效果
                $point.animate({
                    left: 800 + ($box.outerWidth(true)-15)/2,
                    top: 100 + ($box.outerHeight(true)-15)/2
                },300,'swing',function(){
                    $point.hide();
                    $point.css({'top': $point_top, 'left': $point_left});
                    //将数量加好后把内容加到元素中去
                    iNum.html(parseInt(iNum.html()) + 1);
                });
            })
        })
    </script>
    <style>
        .red_point{
            position: fixed;
            left: 557px;
            top: 510px;
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
            z-index: 9999;/*优先显示*/
            display: none ;
        }

        input{
            position: fixed;
            top: 500px;
            left: 500px;
            width: 125px;
            font-size: 20px;
            background-color: lightcoral;
            border-radius: 4px;
            outline: none;
        }

        input:hover{
            background-color: #d56d6d;
        }

        .box{
            position: fixed;
            font-size: 20px;
            left: 800px;
            top: 100px;
            width: 150px;
            border: 2px solid lightsalmon;
            border-radius: 3px;
            text-align: center;
        }

        .num{
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="red_point"></div>
    <input type="button" value="加入购物车">
    <div class="box">购物车<span class="num">0</span></div>
</body>
</html>

效果：
请添加图片描述

置顶菜单（包含悬浮置顶按钮）

该菜单会随页面滚动一段距离后，就固定在顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3237794_zoi6xru4p4r.css">
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            var $nav = $('.nav');
            var $nav_back = $('.nav_back');
            var $to_top = $('i');
            $(window).scroll(function(){
                $to_top.click(function(){
                    // $(document).scrollTop(0);//太快太直接，没有一个动画效果
                    $('html,body').animate({'scrollTop':0});//有回到顶部的动画过程
                });
                document.title = $(document).scrollTop();
                if($(document).scrollTop() >= 108){
                    $nav.css({
                        'position':'fixed',
                        'top':0,
                        'left':0,
                        'right':0,
                        'margin': 'auto'
                });
                    $nav_back.show();//用于菜单置顶不动后，后面紧跟的内容突然向上消失一部分
                }
                else{
                    $nav.css('position','static');
                    $nav_back.hide();
                }
            })
        })
    </script>
    <style>
        body{
            text-align: center;
            font-size: 30px;
        }
        .head{
            width: 100%;
            height: 100px;
            margin: 0 auto;
            line-height: 100px;
            background-color: lightblue;
        }
        .nav{
            width: 1200px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            background-color: lightgreen;
        }
        .nav_back{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            display: none;
        }
        .innerhtml{
            width: 1000px;
            height: 400px;
            line-height: 400px;
            background-color: lightcoral;
            margin: 30px auto;
        }
        .icon-huidaodingbu{
            position: fixed;
            bottom: 30px;
            right:20px;
            font-size: 75px;
        }

    </style>
</head>
<body>
    <div class="head">这是页面头部</div>
    <div class="nav">这是菜单导航栏</div>
    <div class="nav_back"></div>
    <div class="innerhtml">这是内容1</div>
    <div class="innerhtml">这是内容2</div>
    <div class="innerhtml">这是内容3</div>
    <div class="innerhtml">这是内容4</div>
    <div class="innerhtml">这是内容5</div>
    <i class="iconfont icon-huidaodingbu"></i> 
</body>
</html>

效果：
请添加图片描述
注：紧跟菜单导航栏闯将一个宽高位置一致的盒子用来在菜单导航栏固定后，占用导航栏之前的位置，导航栏固定之前，盒子用display:none隐藏掉。
避免出现，导航栏下紧跟的内容有一部分突然消失。

回到顶部部分的代码：

                // $(document).scrollTop(0);//太快太直接，没有一个动画效果
                  $('html,body').animate({'scrollTop':0});//有回到顶部的动画过程

码界索隆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery（五）元素的尺寸、位置和页面滚动事件

文章目录尺寸相关、滚动事件练习加入购物车动画置顶菜单（包含悬浮置顶按钮）尺寸相关、滚动事件获取和设置元素的尺寸1).width()、height() //获取元素width和height2).innerWidth()、innerHeight() //包括padding的width和height3).outerWidth()、outerheigth() //包括padding和border的width和height4).outerWidth(true)、outerHeight(true)
复制链接

扫一扫