JQuery学习之最终篇（三）

挑战不可

已于 2023-11-08 09:03:29 修改

阅读量209

点赞数

分类专栏： JQuery C#学习文章标签： jquery c#

于 2020-08-12 22:10:19 首次发布

本文链接：https://blog.csdn.net/qq_42612120/article/details/107967832

版权

C#学习同时被 2 个专栏收录

45 篇文章 9 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

1.动画

动画效果一：show(时间)，hide(时间)

• 说明：时间的单位为毫秒

• 方法 toggle( 时间 ) ：使用动画切换显示与隐藏

动画效果二： slideDown ( 时间 ), slideUp ( 时间 )

• 切换： slideToggle ( 时间 )

动画效果三： fadeIn ( 时间 ), fadeOut ( 时间 )

• 切换： fadeToggle ( 时间 )

• 动画到指定的透明效果： fadeTo ( 时间 ,opacity);

• 指定透明度，值为 0-1

可以在动画函数中传递一个 callback ，表示动画完成后在每个元素上执行此函数

自定义动画： animate( 样式，时间 )

• 只能对数字类型的样式设置动画

• 使用链式编程，可以将多个动画拼接起来

选择器“ :animated” ，选择正在执行动画的元素

停止动画： stop();

• 如果不传递参数，表示停止当前动画，后续动画会继续执行

• 传递参数 true ，表示停止当前动画，并且清除所有的动画队列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>01动画</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //显示按钮
            $('#btnShow').click(function () {
                $('#div1').show(1000);

                //show与hide合成动画
                //$('#div1').toggle(1000);
            });

            //隐藏按钮
            $('#btnHide').click(function () {
                $('#div1').hide(1000);
            });


            //下拉
            $('#btnSlideDown').click(function () {
                $('#div1').slideDown(1000);
            });
            //收起
            $('#btnSlideUp').click(function () {
                $('#div1').slideUp(1000);
            });

            //渐隐
            $('#btnFadeIn').click(function () {
                $('#div1').fadeIn(1000);
            });
            //渐显
            $('#btnFadeIn').click(function () {
                $('#div1').fadeOut(1000);
            });


        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示" />
    <input type="button" id="btnHide" value="隐藏" />
    <hr />
    <input type="button" id="btnSlideDown" value="下拉" />
    <input type="button" id="btnSlideUp" value="收起" />
    <hr />
    <input type="button" id="btnFadeIn" value="渐隐" />
    <input type="button" id="btnFadeOut" value="渐显" />
    <div id="div1"></div>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>02自定义动画</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#btnAnimate').click(function () {
                //$('#div1').animate({  //同时进行缩小
                //    'width': '50px',
                //    'height': '50px'
                //},1000);


                //$('#div1').animate({ //宽度先缩小，高度再缩小
                //    'width': '50px'
                //}, 1000).animate({
                //    'height': '50px'
                //}, 1000);


                $('#div1').animate({ //宽度先缩小，高度再缩小
                    'width': '50px'
                }, 3000).animate({
                    'height': '50px'
                }, 3000);
            });

            $('#btnStopCurr').click(function () {
                //不给stop传递参数，表示只停止当前动画，后面的动画继续执行
                $(':animated').stop();
            });

            $('#btnStopAll').click(function () {
                //停止所有动画
                $(':animated').stop(true);
            });


        });
    </script>
</head>
<body>
    <input type="button" id="btnAnimate" value="动画" />
    <input type="button" id="btnStopCurr" value="停止当前动画" />
    <input type="button" id="btnStopAll" value="停止所有动画" />
    <div id="div1"></div>
</body>
</html>

2.练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>03练习</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //隐藏
            $('ul').hide();
            //为span元素添加点击事件
            $('span').css('cursor', 'pointer').click(function () {
                //被点击的span后面的元素显示
                $(this).next().next().slideDown(1000)
                    //找到ul的众多兄弟中的兄弟
                    .siblings('ul').slideUp(1000);
            });
        });
    </script>
</head>
<body>
    <span>我的好友</span><br />
    <ul id="fg">
        <li>换个</li>
        <li>话题</li>
        <li>和团</li>
        <li>团体</li>
    </ul>
    <span>黑名单</span><br />
    <ul id="fb">
        <li>分割</li>
        <li>古胡</li>
        <li>沟通</li>
        <li>体育</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>04标签页</title>
    <style>
        .title {
            width: 100px;
            height: 30px;
            border: 1px solid red;
            margin: 3px;
            float: left;
        }

        .content {
            width: 420px;
            height: 300px;
            border: 1px solid blue;
            clear: both;
        }
    </style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('.title').mouseover(function () {
                var divContent = $('.content');
                switch (parseInt(this.id)) {
                    case 0:
                        divContent.html('<h1>户同样如同发</h1>');
                        break;
                    case 1:
                        divContent.html('<h1>通他也会过后</h1>');
                        break;
                    case 2:
                        divContent.html('<h1>与太图乳阳</h1>');
                        break;
                    case 3:
                        divContent.html('<h1>应用会让他</h1>');
                        break;
                }
            });
        });
    </script>
</head>
<body>
    <div class="title" id="0">一带一路</div>
    <div class="title" id="1">丝绸之路</div>
    <div class="title" id="2">户分割路</div>
    <div class="title" id="3">弱覆盖路</div>
    <div class="content"></div>
</body>
</html>

3.图片轮播

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>05图片幻灯片</title>
    <style>
        #imgContainer {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: absolute;
            left: 10px;
            top: 10px;
        }

            #imgContainer img {
                width: 300px;
                height: 300px;
                position: absolute;
                left: 0px;
                top: 0px;
            }

            #imgContainer div {
                position: absolute;
            }

            #imgContainer .imgTip {
                border: 1px solid blue;
                background-color: green;
                color: white;
                padding: 3px;
                width: 10px;
                cursor: pointer;
                z-index: 100;
                bottom: 10px;
                /*设置数据提示再图片上面*/
            }
    </style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>

        var changeImgId;//自动更换定时器变量
        //定义一个集合
        var list = ['images/zg.jpg', 'images/hg.jpg', 'images/mg.jpg', 'images/rb.jpg'];

        $(function () {
            $.each(list, function (index) {
                //根据数组生成所有的img图片
                $('<img  src="' + this + '" />')
                    .appendTo('#imgContainer');
                //根据图片生成数字提示
                $('<div class=imgTip>' + (index + 1) + '</div>')
                    .css('right', (4 - index) * 20 + 'px')
                    .appendTo('#imgContainer');
            });
            //设置第一张图片隐藏
            $('#imgContainer>img:gt(0)').hide();
            //设置提示数字的事件
            $('#imgContainer>.imgTip').hover(function () {
                $('#imgContainer>img').eq(parseInt($(this).text()) - 1)
                    //将指向索引对应的图片一动画的形式展示出来
                    .slideDown(1000)
                    //将其他图片以动画形式隐藏
                    .siblings('img').fadeOut(1000);
                //设置颜色
                $(this).css('background-color', 'blue')
                    .siblings('.imgTip').css('background-color', 'green');
                //清除自动播放的定时器
                clearInterval(changeImgId);
                //更改图片索引
                imgIndex = parseInt($(this).text()) - 1;
            }, function () {//移动数字
                changeImgId = setInterval(changeImg, 2000);
            });
            //完成自动切换
            changeImgId = setInterval(changeImg, 2000);

            $('#imgContainer>.imgTip:eq(0)').css('background-color', 'blue');

        });

        //切换图片
        var imgIndex = 0;
        function changeImg() {
            imgIndex++;
            if (imgIndex >= list.length) {
                imgIndex = 0;//如果为最后一张，制定为第一张
            }
            $('#imgContainer>img').eq(imgIndex)
                //将指向索引对应的图片一动画的形式展示出来
                .slideDown(1000)
                //将其他图片以动画形似隐藏
                .siblings('img').fadeOut(1000);
            //设置颜色
            $('#imgContainer>.imgTip').eq(imgIndex)
                .css('background-color', 'blue')
                .siblings('.imgTip').css('background-color', 'green');
        }



    </script>
</head>
<body>
    <div id="imgContainer"></div>
</body>
</html>