Day58：jQuery的动画效果、CSS操作

时间：2017-08-16 17:06:28 阅读：192 评论：0 收藏：0 [点我收藏+]

标签：style 单位 show name closed display head off meta

一、动画效果

1、显示隐藏 ——hide()、show()、toggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Day45/jquery-3.2.1.js"></script>
    <script>

        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide(1000);
            });
            $("#show").click(function () {
                $("p").show(1000);
            });

            //用于切换被选元素的 hide() 与 show() 方法。
            $("#toggle").click(function () {
                $("p").toggle();
            });
        })

    </script>
</head>
<body>

<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>

</body>
</html>

2、滑动——slideDown、slideUp、slideToggle

<!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">
    <title>Title</title>
    <script src="../Day45/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#slideDown").click(function () {
                $("#content").slideDown(1000);
            });
            $("#slideUp").click(function () {
                $("#content").slideUp(1000);
            });
            $("#slideToggle").click(function () {
                $("#content").slideToggle(1000);
            })
        });
    </script>
    <style>

        #content {
            text-align: center;
            background-color: lightblue;
            border: solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>

<div id="content">hello world</div>

</body>
</html>

3、淡入淡出——fadeIn、fadeOut、fadeToggle、fadeTo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Day45/jquery-3.2.1.js"></script>

    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});
        
    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

4、回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Day45/jquery-3.2.1.js"></script>
</head>
<body>
<button>hide</button>
<button>show</button>
<p>hello world hello world hello world</p>

<script>
    $("button").eq(0).click(function () {
        $("p").hide(1000, function () {
            alert($(this).html())
        })
    })
    $("button").eq(1).click(function () {
        $("p").show(1000, function () {
            alert($(this).html())
        })
    })
</script>
</body>
</html>

二、CSS位置、尺寸操作

1、CSS位置操作

$("").offset([coordinates])

　　获取匹配元素在当前视口的相对偏移。

　　返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

　$("").position()

　　获取匹配元素相对父元素的偏移。

　　返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

$("").scrollTop([val])

　　获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

　$("").scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1 {
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>


<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="../Day45/jquery-3.2.1.js"></script>

<script>
    var $offset = $(".test1").offset();
    var lefts = $offset.left;
    var tops = $offset.top;

    $("p").text("Top:" + tops + " Left:" + lefts);
    $("button").click(function () {

        $(".test1").offset({left: 200, top: 400})
        $("p").text("Top:" + 200 + " Left:" + 400);
    })
</script>
</html>

offset

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: darkcyan;
        }

        .parent_box {
            position: relative;
        }
    </style>
</head>
<body>


<div class="box1"></div>
<div class="">
    <div class="box2"></div>
</div>
<p></p>


<script src="../Day45/jquery-3.2.1.js"></script>
<script>
    var $position = $(".box2").position();
    var $left = $position.left;
    var $top = $position.top;

    $("p").text("TOP:" + $top + "LEFT" + $left)
</script>
</body>
</html>

position

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            margin: 0;
        }

        .returnTop {
            height: 60px;
            width: 100px;
            background-color: peru;
            position: fixed;
            right: 0;
            bottom: 0;
            color: white;
            line-height: 60px;
            text-align: center;
            display: none;
        }

        .div1 {
            background-color: wheat;
            font-size: 5px;
            overflow: auto;
            width: 500px;
            height: 200px;
        }

        .div2 {
            background-color: darkgrey;
            height: 2400px;
        }

    </style>
</head>
<body>
<div class="div1 div">
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
</div>
<div class="div2 div"></div>
<div class="returnTop">返回顶部</div>

<script src="../Day45/jquery-3.2.1.js"></script>

<script>
    $(window).scroll(function () {
        var current = $(window).scrollTop();
        console.log(current);
        if (current > 100) {

            $(".returnTop").show()
        }
        else {
            $(".returnTop").hide()
        }
    });


    $(".returnTop").click(function () {
        $(window).scrollTop(0)
    });


</script>
</body>
</html>

scrollTop

示例4‘：

2、尺寸操作

$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: wheat;
            padding: 50px;
            border: 50px solid rebeccapurple;
            margin: 50px;
        }

    </style>
</head>
<body>


<div class="box1">
    DIVDIDVIDIV
</div>


<p></p>

<script src="../Day45/jquery-3.2.1.js"></script>
<script>
    var $height = $(".box1").height();
    var $innerHeight = $(".box1").innerHeight();
    var $outerHeight = $(".box1").outerHeight();
    var $margin = $(".box1").outerHeight(true);

    $("p").text($height + "---" + $innerHeight + "-----" + $outerHeight + "-------" + $margin)
</script>
</body>
</html>

View Code

Day58：jQuery的动画效果、CSS操作

标签：style 单位 show name closed display head off meta

原文地址：http://www.cnblogs.com/maple-shaw/p/7373635.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行