web JQ 动画与循环

最新推荐文章于 2022-09-11 12:26:35 发布

廷益--飞鸟

最新推荐文章于 2022-09-11 12:26:35 发布

阅读量308

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_45875105/article/details/110047626

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

动画的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画的展示</title>
    <style>
        #ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: gold;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div>
        <img id="img" src="imgs/头像.jpg" alt="">
    </div>
    <button id="btn">隐藏</button>
    <!-- 定义一个小球元素 -->
    <div id="ball">

    </div>
    <button id="move">移动</button>
    <script>
        $("#btn").on("click", function () {
            if ($(this).text() == "隐藏") {
                //淡出
                $("#img").fadeOut(1000, function () {
                    $("#btn").text("显示");
                });
            }
            else {
                //淡入
                $("#img").fadeIn(1000, function () {
                    $("#btn").text("隐藏");
                });
            }
        })

        // 自定义动画
        $("#move").on("click", function () {
            //淡入
            $("#ball").fadeIn(1000);

            //到移动 left 60%处
            $("#ball").animate({ left: "60%" });
            // 等待后移动
            setTimeout(function () {
                $("#ball").animate({ top: "30%" })
            }, 100);
            // 等待后移动
            setTimeout(function () {
                $("#ball").animate({ left: "50%" })
            }, 200);

            //等待后  淡出
            setTimeout(function () {
                $("#ball").animate({ top: "50%" }, function () {
                    $("#ball").fadeOut(1000);
                })
            }, 300);
        })

        //只能写一次
        // window.οnlοad=function(){
        //     alert("原生页面加载完成")
        // }
        // window.οnlοad=function(){
        //     alert("原生页面加载完成1")
        // }
        
        // 页面加载完成
        $(function () {
            alert("页面加载完成");
        })
        // $(function(){
        //     alert("页面加载完成2");
        // })
    </script>
</body>

</html>

循环遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div>abc</div>
    <div>def</div>
    <div>ggg</div>

    <script>
        //使用each函数完成
        //写法:选择器.each(function(index, element)){}
            //index 索引号
            //element 原生元素
        $("div").each(function(index, element){
            console.log(index);
            console.log($(element));
            //获取元素内容
            console.log($(element).text())
        })
    </script>
</body>
</html>

廷益--飞鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web JQ 动画与循环

动画的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画的展示</title> <style> #ball { .
复制链接

扫一扫