图标特效和滚动

jQuery学习
创建时间:
字数:1.2k 阅读: 评论:
  1. 图标特效和滚动
    1. jQuery的stop和delay方法
    2. 图标特效
    3. 无限循环滚动（轮播图）

图标特效和滚动

jQuery的stop和delay方法

  • 总结：stop(‘是否停止后续动画’,’是否完成当前动画’)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery的stop和delay方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .one{
                width: 100px;
                height: 100px;
                background: red;
            }
            .two{
                width: 500px;
                height: 10px;
                background: blue;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 编写jQuery相关代码
                $("button").eq(0).click(function () {
                    /*
                    在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行
                    */
                    /*
                    $(".one").animate({
                        width: 500
                        // height: 500
                    }, 1000);

                    $(".one").animate({
                        height: 500
                    }, 1000);
                    */
                    /*
                    delay方法的作用就是用于告诉系统延迟时长
                    */
                    /*
                    $(".one").animate({
                        width: 500
                        // height: 500
                    }, 1000).delay(2000).animate({
                        height: 500
                    }, 1000);
                    */
                    $(".one").animate({
                        width: 500
                    }, 1000);
                    $(".one").animate({
                        height: 500
                    }, 1000);

                    $(".one").animate({
                        width: 100
                    }, 1000);
                    $(".one").animate({
                        height: 100
                    }, 1000);
                });
                $("button").eq(1).click(function () {
                    // 立即停止当前动画, 继续执行后续的动画
                    // $("div").stop();
                    // $("div").stop(false);
                    // $("div").stop(false, false);

                    // 立即停止当前和后续所有的动画
                    // $("div").stop(true);
                    // $("div").stop(true, false);

                    // 立即完成当前的, 继续执行后续动画
                    // $("div").stop(false, true);

                    // 立即完成当前的, 并且停止后续所有的
                    $("div").stop(true, true);
                });
            });
        </script>
    </head>
    <body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one" style="display: none"></div>
    <div class="two"></div>
    </body>
    </html>

图标特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标特效</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 400px;
            height: 250px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        ul>li{
            width: 100px;
            height: 50px;
            margin-top: 50px;
            text-align: center;
            float: left;
            overflow: hidden;  //超出的被剪切掉
        }
        ul>li>span{
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("images/bg.png") no-repeat 0 0;
            position: relative;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.遍历所有的li
            $("li").each(function (index, ele) {
                // 1.1生成新的图片位置
                var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px";
                // 1.2设置新的图片位置
                $(this).children("span").css("background", $url);
            });
            
            // 2.监听li移入事件
            $("li").mouseenter(function () {
                // 2.1将图标往上移动
                $(this).children("span").animate({
                    top: -50
                }, 1000, function () {
                    // 2.2将图片往下移动
                    $(this).css("top", "50px");
                    // 2.3将图片复位
                    $(this).animate({
                        top: 0
                    }, 1000);
                });
            });
        });
    </script>
</head>
<body>
<ul>
    <li><span></span><p>百度</p></li>
    <li><span></span><p>淘宝</p></li>
    <li><span></span><p>微博</p></li>
    <li><span></span><p>网易</p></li>
    <li><span></span><p>unknow</p></li>
    <li><span></span><p>腾讯</p></li>
    <li><span></span><p>视频</p></li>
    <li><span></span><p>京东</p></li>
</ul>
</body>
</html>

无限循环滚动（轮播图）

  • 总结：ul下的li之所以用到6张的原因，就是为了解决从不同图片跳转时引起的闪动，如果从相同图片改变，则没有明显的差别，即将3和4后加上1和2让它与前面的的1和2相对应。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无限循环滚动</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 600px;
                height: 161px;
                border: 1px solid #000;
                margin: 100px auto;
                overflow: hidden;
            }
            ul{
                list-style: none;
                width: 1800px;
                height: 161px;
                background: #000;
            }
            ul>li{
                float: left;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 0.定义变量保存偏移位
                var offset = 0;
                // 1.让图片滚动起来
                var timer;
                function autoPlay(){
                    timer = setInterval(function () {
                        offset += -10;
                        if(offset <= -1200){
                            offset = 0;
                        }
                        $("ul").css("marginLeft", offset);
                    }, 50);
                }
                autoPlay();

               // 2.监听li的移入和移出事件
                $("li").hover(function () {
                    // 停止滚动
                    clearInterval(timer);
                    // 给非当前选中添加蒙版
                    $(this).siblings().fadeTo(100, 0.5);
                    // 去除当前选中的蒙版
                    $(this).fadeTo(100, 1);
                }, function () {
                    // 继续滚动
                    autoPlay();
                    // 去除所有的蒙版
                    $("li").fadeTo(100, 1);
                });
            });
        </script>
    </head>
    <body>
    <div>
        <ul>
            <li><img src="images/a.jpg" alt=""></li>
            <li><img src="images/b.jpg" alt=""></li>
            <li><img src="images/c.jpg" alt=""></li>
            <li><img src="images/d.jpg" alt=""></li>
            <li><img src="images/a.jpg" alt=""></li>
            <li><img src="images/b.jpg" alt=""></li>
        </ul>
    </div>
    </body>
    </html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com

赏

文章标题:图标特效和滚动

文章字数:1.2k

本文作者:南邮石磊

发布时间:2020-07-24, 00:58:31

最后更新:2020-08-06, 00:36:23

原始链接:https://southpost.github.io/2020/07/24/%E5%9B%BE%E6%A0%87%E7%89%B9%E6%95%88%E5%92%8C%E6%BB%9A%E5%8A%A8/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019-2020 SLTAL

Built with Hexo and 3-hexo theme

目录
×

喜欢就点赞,疼爱就打赏