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

最新推荐文章于 2024-05-19 18:52:56 发布

SpecYue

最新推荐文章于 2024-05-19 18:52:56 发布

阅读量315

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_34788903/article/details/86564777

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

获取元素尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div=$('.box');
            //盒子内容的尺寸
            console.log($div.width());
            console.log($div.height());
            //盒子内容加上padding的尺寸
            console.log($div.innerWidth());
            console.log($div.innerHeight());
            //盒子的真实尺寸，内容尺寸加上padding加上brder
            console.log($div.outerWidth());
            console.log($div.outerHeight());
            //盒子的真实尺寸加上margin
            console.log($div.outerWidth(true));
            console.log($div.outerHeight(true));
        })
    </script>
    <style type="text/css">
        .box{
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 10px solid #000;
            margin: 20px;
            background-color: gold;
        }

    </style>
</head>
<body>
    <div class="box">
        dd
    </div>
</body>
</html>

获取元素绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div=$('.box');
            //获取元素绝对位置
            var oPos=$div.offset();
            console.log(oPos);

            $div.click(function () {
              // alert(oPos.left);
              document.title=oPos.left+"|"+oPos.top;
            })
        })
    </script>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: #f6b544;
            margin: 50px auto 0;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

主要就是offset（）函数

加入购物车动画

设置一个按钮，一个购物车框，一个小方框（隐藏）。点击按钮之后，小方框的位置从按钮以animate动画的形式放到购物车框，购物车的数量加一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
           var $chart=$('.chart');
           var $count=$('.chart em');
           var $btn=$('.add');
           var $point=$('.points');

           var $w01=$btn.outerWidth();
           var $h01=$btn.outerHeight();



           $btn.click(function () {
               var oPos01=$btn.offset();
               var oPos02=$chart.offset();

               $point.css({left:oPos01.left+parseInt($w01/2)-8,top:oPos01.top+parseInt($w01/2)-8}).show();/*移动到购物车按钮上，然后show*/
               $point.animate({left:oPos02.left+parseInt($w01/2)-8,top:oPos02.top+parseInt($w01/2)-8},800,function () {
                   $point.hide();

                   var iNum=$count.html();/*读em里的信息*/
                   $count.html(parseInt(iNum)+1);/*转换成int类型然后加一*/
               });

           })
        });
    </script>

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

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

        .add{
            width: 100px;
            height: 50px;
            border: 0;/*去掉边框*/
            background-color: green;
            color: #fff;
            float: left;
            margin-top: 300px;
            margin-left: 300px;
        }
        .points{
            width: 16px;
            height: 16px;
            background-color: red;
            position: fixed;/*固定定位，就是相对于页面位置的定位*/
            left: 0;
            top: 0;
            display: none;/*把小红点藏起来*/
            z-index: 999;/*这样设置小红点就能盖住其他元素*/
        }
    </style>
</head>
<body>
    <div class="chart">购物车<em>0</em></div>
    <input type="button" name="" value="加入购物车" class="add">
    <div class="points"></div>
</body>
</html>

SpecYue

关注

0
点赞
踩
0

收藏

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

获取元素尺寸&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript" s
复制链接

扫一扫

专栏目录