10-jquery 获取元素位置、尺寸页面滚动事件加入购物车动画悬浮菜单滚动到页面顶部

元素尺寸、位置和页面滚动事件

1、获取元素的尺寸

width()、height() 获取元素width和height

innerWidth()、innerHeight() 包括padding的width和height

//这是一个盒子的真实尺寸，包括pading和border：
outerWidth()、outerHeight() 包括padding和border的width和height

outerWidth(true)、outerHeight(true)包括padding和border以及margin的width和height

    <style>
        .box{
            width:200px;
            height:300px;
            border:10px solid #666;
            padding:10px;
            margin:20px;
            background-color:gold;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
           var $div = $(".box");

           //盒子内容的尺寸
           console.log($div.width());
           console.log($div.height());

           //盒子内容+padding的尺寸
           console.log($div.innerWidth());
           console.log($div.innerHeight());

           //这是一个盒子的真实尺寸，包括pading和border：
           console.log($div.outerWidth());
           console.log($div.outerHeight());

           //盒子真实尺寸+margin
           console.log($div.outerWidth(true));
           console.log($div.outerHeight(true));


        })
    </script>

2、获取元素相对页面的绝对位置

offset()

    <script src="js/jquery.js"></script>
    <script>
        /*
        $(function(){
            var $div = $(".box");

            var oPos = $div.offset();

            //浏览器的console中显示oPos的left和top值
            console.log(oPos)

        })
        */

        //或者：
        $(function(){
            var $div = $('.box');
            $div.click(function(){
                var oPos = $div.offset()
                // alert(oPos.left)
                document.title = oPos.left+'|'+oPos.top;
            })
        })

    </script>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:gold;
            margin:50px auto 0;
        }
    </style>

加入购物车动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加入购物车</title>

    <style>
        .car{
            width:150px;
            height:50px;
            border:2px solid #000;
            text-align:center;
            line-height:50px;
            float:right;
            margin-right:100px;
            margin-top:50px;
        }

        .car em{
            font-style:normal;
            color:red;
            font-weight:bold;

        }

        .btn{
            width:100px;
            height:50px;
            background-color:green;
            border:0;
            color:#fff;
            float:left;
            margin-top:300px;
            margin-left:300px;
        }

        .point{
            /*小红点默认隐藏*/
            width:16px;
            height:16px;
            background-color:red;
            position:fixed;
            left:0;
            top:0;
            display:none;
            z-index:999;
            border-radius:50%

        }
    </style>
    
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
        
        var $chart = $(".car");
        var $count = $(".car em");
        var $btn = $(".btn");
        var $point = $(".point");

        //获取按钮的宽高
        var $w01 = $btn.outerWidth();
        var $h01 = $btn.outerHeight();
        //获取购物车的宽高
        var $w02 = $chart.outerWidth();
        var $h02 = $chart.outerHeight();

        //点击按钮时，小红点移到按钮的位置，然后再移到购物车，购物车数字再加1
        $btn.click(function(){
            var oPos01 = $btn.offset();
            var oPos02 = $chart.offset();

            //先将小红点移到按钮上，正中央
            $point.css({left:oPos01.left+parseInt($w01/2)-8,top:oPos01.top+parseInt($h01/2)-8});
            //让小红点显示
            $point.show();
            //让小红点动画到购物车上，正中央
            $point.animate({left:oPos02.left+parseInt($w02/2)-8,top:oPos02.top+parseInt($h02/2)-8},800,function(){
                $point.hide();

                var iNum = $count.html();  /*读*/

                $count.html(parseInt(iNum)+1);  /*写*/
    
            });
            
        })


      })
         
    </script>
</head>
<body>
    <div class="car">加入购物车<em>0</em></div>

    <input class='btn' type="button" value="加入购物车">

    <div class="point"></div>
</body>
</html>

3、获取浏览器可视7区宽度、高度
$(window).width()
$(window).height()

4、获取页面文档的宽度、高度
$(document).width()
$(document).height()

5、获取页面滚动距离
$(document).scrollTop()
$(document).scrollLeft()

6、获取滚动事件
$(window).scroll(function(){
...
})

悬浮菜单，滚动到页面顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮菜单</title>
    <style>
        body{
            margin:0;
        }

        .banner{
            width:960px;
            height:200px;
            background-color:cyan;
            margin:0 auto;
        }

        .menu{
            width:960px;
            height:80px;
            background-color:gold;
            margin:0 auto;
            text-align:center;
            line-height:80px;
        }

        .menu_back{
            width:960px;
            height:80px;
            display:none;
            margin:0 auto;
            background-color: pink
        }
        

        p{
            text-align: center;
            color:red;
        }

        .totop{
            width:60px;
            height:60px;
            background-color:#000;
            color:#fff;

            position:fixed;
            right:20px;
            bottom:50px;
            text-align: center;
            line-height:60px;
            font-size:30px;
            border-radius:50%;
            cursor:pointer;
            /*默认藏起来，滚动到一定距离时再显示*/
            display: none;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 滚动事件
            $(window).scroll(function(){

                var iNum = $(document).scrollTop();

                //因为当菜单浮动后，不占位置，下方的内容就会突然飞到上方，为了解决这个问题，就再写一个备用菜单，样式一样，if单浮动时，让备用的show()，来顶替原来菜单的位置，else就hide()
                var menu_back = $('.menu_back')

                // document.title = iNum;

                if(iNum>200){
                    $('.menu').css({
                        position:'fixed',
                        left:'50%',
                        top:0,
                        marginLeft:-480,
                    })
                    menu_back.show()
                }

                else{
                    $('.menu').css({
                        //把定位属性改为static，就是关闭定位，按文档流的顺序排列元素
                        position:"static",
                        //但是if中marginleft已经被赋值了，需要用auto覆盖它，使得菜单恢复到默认位置
                        marginLeft:"auto"
                    })
                    menu_back.hide()
                }

                if(iNum>400){
                    // totop.show()
                    totop.fadeIn()
                }
                else{totop.fadeOut()}

            })
                //点击返回页面顶部
               var totop = $('.totop')
                totop.click(function(){
                    //这是一个兼容的写法，有的浏览器认html，有的认body
                    $('html,body').animate({scrollTop:0})

                })
        })




    </script>
</head>
<body>
    <div class="banner"></div>
    <div class="menu">菜单</div>
    <div class="menu_back"></div>
    
    <div class="totop">top</div>
    <p>document contents</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>document contents</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br><p>document contents</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br><p>document contents</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

posted @ 2019-03-28 12:17 greenfan 阅读(167) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

10-jquery 获取元素位置、尺寸 页面滚动事件 加入购物车动画 悬浮菜单 滚动到页面顶部

公告

10-jquery 获取元素位置、尺寸页面滚动事件加入购物车动画悬浮菜单滚动到页面顶部