jQuery动画轮播图 animate自定义动画表单提交 get与pos

最新推荐文章于 2024-06-24 11:05:52 发布

大坤...

最新推荐文章于 2024-06-24 11:05:52 发布

阅读量238

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/red_HTML/article/details/126319289

版权

hide( ) show( )隐藏与显示

toggle 显示与隐藏的切换

fadeIn(时间) 显示 fadeOut 隐藏

fadetoggle( )淡入淡出切换

slideUp（）滑上 slideDown（）滑下

<!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 src="../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <input type="button" value="隐藏显示" id="btn">
    <input type="button" value="隐藏显示切换" id="btn1">
    <input type="button" value="淡入淡出" id="btn2">
    <input type="button" value="淡入淡出切换" id="btn3">
    <input type="button" value="滑上" id="btn4">
    <input type="button" value="滑下" id="btn5">
    <input type="button" value="滑上滑下" id="btn6">
    <div>

    </div>
    <script>
        $(function() {
            // 左上角隐藏
            $("#btn").click(function() {
                    $("div").hide(1000)
                })
                // 左上角显示
            $("#btn").click(function() {
                    $("div").show(1000)
                })
                // hide() show() 之间的切换
            $("#btn1").click(function() {
                    $("div").toggle(1000)
                })
                // 淡入
            $("#btn2").click(function() {
                    $("div").fadeIn(1000)
                })
                // 淡出
            $("#btn2").click(function() {
                    $("div").fadeOut(1000)
                })
                // 淡入淡出之间的切换
            $("#btn3").click(function() {
                    $("div").fadeToggle(1000)
                })
                // 滑上
            $("#btn4").click(function() {
                    $("div").slideUp(1000)
                })
                // 滑下
            $("#btn5").click(function() {
                    $("div").slideDown(1000)
                })
                // 滑上滑下的切换
            $("#btn6").click(function() {
                $("div").slideToggle(1000)
            })
        })
    </script>
</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>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
        }
        
        .slider li {
            position: absolute;
            display: none;
        }
        
        .slider li:first-child {
            display: block;
        }
        
        .arrow {
            display: none;
        }
        
        .slider:hover .arrow {
            display: block;
        }
        
        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }
        
        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .arrow-left {
            left: 0;
        }
        
        .arrow-right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul>
            <li>
                <a href="#"><img src="img/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/7.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/8.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 箭头 -->
        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>
    <script>
        // $(function() {
        //     var xb = 0
        //     $(".arrow-left").click(function() {
        //         xb--
        //         if (xb < 0) {
        //             xb = 8
        //         } else {
        //             $("li").eq(xb).show().siblings().hide()
        //         }
        //     })
        //     $(".arrow-right").click(function() {
        //         xb++
        //         if (xb > 8) {
        //             xb = 0
        //         } else {
        //             $("li").eq(xb).show().siblings().hide()
        //         }
        //     })
        // })
        $(function() {
            var index = 0
            $(".arrow-right").on("click", function() {
                index++
                if (index > ($("ul li").length - 1)) {
                    index = 0
                }
                $("ul li").eq(index).fadeIn().siblings().fadeOut()
            })
            $(".arrow-left").on("click", function() {
                index--
                if (index == -1) {
                    index = $("ul li").length - 1
                }
                $("ul li").eq(index).fadeIn().siblings().fadeOut()
            })
        })
    </script>
</body>

</html>

animate自定义动画

$("div").animate({

"top ":"500px"

})

<!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 src="../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div>
        这是一个div
    </div>
    <script>
        $(function() {
            $("div").on("click", function() {
                $("div").animate({
                    "right": "500px",
                    "top": "400px"
                }, 1000).animate({
                    "font-size": "40px"
                }, 1000).animate({
                    "left": "10px"
                }, 1000)
            })
        })
    </script>
</body>

</html>

表单提交 get与post

get 提交速度快但会暴露输入的信息

post 不会将信息提交到信息栏中

name 相同的表单提交格式

<!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>
</head>

<body>
    <form action="#" method="post">
        <table>
            <thead>
                <tr>
                    <th>个人信息：</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="xingm"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="mima"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" value="男" name="sex">男
                        <input type="radio" value="女" name="sex">女
                    </td>
                </tr>
                <tr>
                    <td>自我介绍：</td>
                    <td>
                        <textarea name="xwjs" id="" cols="30" rows="10"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="submit" value="提交">
    </form>
</body>

</html>