使用jQuery实现网站导航抖动效果


本文摘自PHP中文网,作者angryTom,侵删。

本篇文章介绍了使用jQuery实现网站导航抖动效果的方法,主要用到了each遍历节点和animate自定义动画,希望对学习jQuery的朋友有帮助!

使用jQuery实现网站导航抖动效果

知识点

1、each遍历节点

2、 animate()自定义动画

代码

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

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

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .box {

            width: 350px;

            height: 350px;

            margin: 100px auto;

            cursor: pointer;

        }

        .box ul li {

            float: left;

            width: 80px;

            height: 80px;

            text-align: center;

            border: 1px solid #ccc;

            box-sizing: border-box;

            margin: 2px;

        }

        .box>ul>li>span {

            display: block;

            width: 24px;

            height: 24px;

            background: url("images/bg.png") 0 -24px no-repeat;

            margin: 10px auto;

        }

    </style></head><body>

    <p class="box">

        <ul>

            <li><span></span>百度</li>

            <li><span></span>淘宝</li>

            <li><span></span>新浪</li>

            <li><span></span>网易</li>

            <li><span></span>搜狐</li>

            <li><span></span>腾讯</li>

            <li><span></span>优酷</li>

            <li><span></span>京东</li>

        </ul>

    </p><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">

    $(function () {

        // 1. 展示图片

        var $li = $('.box>ul>li');

        $li.each(function (index, value) {

            $(this).children('span').css({

                'background': ' url("images/bg.png") 0 -' + index * 24 + 'px no-repeat'

            })

        });

 

        // 2. 抖动动画

        $li.hover(function () {

            shake(this);

        }, function () {

            // 停止抖动

            stopShake(this);

        });

 

 

        function shake(ele) {

            // 1. 设置css

            $(ele).css({

               'position': 'relative'

            });

 

            // 2. 确定走动的值

            var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px';

            $(ele).animate({

                left: animateLeft            }, 100, function () {

                shake(ele);

            });

        }

 

        function stopShake(ele) {

            $(ele).stop(true, false).css({

                left: '0'

            })

        }

    });</script></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

        // 停止抖动

        stopShake(this);

    });

 

 

    function shake(ele) {

        // 1. 设置css

        $(ele).css({

           'position': 'relative'

        });

 

        // 2. 确定走动的值

        var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px';

        $(ele).animate({

            left: animateLeft            }, 100, function () {

            shake(ele);

        });

    }

 

    function stopShake(ele) {

        $(ele).stop(true, false).css({

            left: '0'

        })

    }

});</script></body></html>

运行结果

鼠标放上后会不停抖动
在这里插入图片描述在这里插入图片描述

本文来自 js教程 栏目,欢迎学习!

以上就是使用jQuery实现网站导航抖动效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jQuery如何判断是否是数组元素

如何用jQuery让图片逐渐显示出来

jQuery weui是什么?

jQuery怎么自定义函数

jQuery中deferred对象是什么?

jQuery如何判断数组中是否存在某个值

jQuery怎么样判断是否为空

jQuery如何判断元素内容是否为空

jQuery如何判断是否为空

jQuery和zepto的差异有什么

更多相关阅读请进入《jQuery》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...