Fork me on GitHub

常见方法

发表于 | 分类于 | 阅读次数:
字数统计: 6,190 字 | 阅读时长 ≈ 31 分钟

常见方法

  1. css()方法
  2. show()和hide()方法
  3. slideDown()和slideUp()方法
  4. fadeIn()和fadeOut()方法
  5. addClass()和removeClass()方法
  6. attr()方法
  7. html()方法

css()方法

(1).jq 对象.css(‘属性名’,’属性值’);

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 1.css()
     * 描述：本方法提供给 jq 对象，用来读写 jq 对象的 css 属性。相当于 js 中的 style 属性
     * 语法：
     * (1).jq 对象.css('属性名','属性值');
     * 说明：第二个参数为可选的参数，如果不写代表读取当前属性的值
     * 注意：使用 css() 方法读写属性的时候，css 属性不需要改写
     */
    $('.div1').click(function () {
        $(this).css('background-color','red');
    });
    $('.div2').click(function () {
        console.log($(this).css('background-color'));
    });
</script>
</body>
</html>

mark

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 1.css()
     * 描述：本方法提供给 jq 对象，用来读写 jq 对象的 css 属性。相当于 js 中的 style 属性
     * 语法：
     * (1).jq 对象.css('属性名','属性值');
     * 说明：第二个参数为可选的参数，如果不写代表读取当前属性的值
     * 注意：使用 css() 方法读写属性的时候，css 属性不需要改写
     */
    $('.div1').click(function () {
        $(this).css('background-color','red');
        // 宽度变长
        $(this).css('width','300px');
    });
    $('.div2').click(function () {
        // 可以拿到属性样式
        console.log($(this).css('background-color'));
    });
</script>
</body>
</html>

mark

（2）JSON样式参数就是设置样式

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 1.css()
     * 描述：本方法提供给 jq 对象，用来读写 jq 对象的 css 属性。相当于 js 中的 style 属性
     * 语法：
     * (2).jq对象.css({'css属性1':'属性值1','css属性2':'属性值2',...})
     * 说明：参数是 JSON 格式的时候，css() 方法允许一次性修改多个样式。
     * 注意：JSON 参数理论上属性可以不写引号，但是如果 css 属性存在 - 等特殊字符，则必须添加。
     */
    $('.div1').click(function () {
        $(this).css({
            // 注意：样式名称要加上 单引号引上
            'background-color':'red',
            'width':'300px'
        });
    });
    $('.div2').click(function () {
        console.log($(this).css('background-color'));
    });
</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
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 第一种写法
    // $('.div1').click(function () {
    //     var oldWidth = parseInt($(this).css('width'));
    //     var newWidth = oldWidth+50+'px';
    //     $(this).css('width',newWidth);
    // });
    // 第二种写法
    $('.div1').click(function () {
        $(this).css('width','+=50px');
    });
</script>
</body>
</html>

show() && hide()

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
<button>show()</button>
<button>hide()</button>
<button>show(5000)</button>
<button>hide(5000)</button>
<div class="div1"></div>
<!--<script src="js/jquery-1.12.3.min.js"></script>-->
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    /**
     * 1. 常见方法 show()&hide()
     * 描述：show() 和 hide() 方法表示设置 jq 对象的显示和隐藏
     * 语法：jq对象.show(animationTime); / jq对象.hide(animationTime);
     * 说明：show() / hide() 方法实际上允许添加单位为 ms 的动画时间.
     *       如果添加参数，则动画是宽高渐变，透明度渐变。
     */
    // eq():通过下标获取
    $('button').eq(0).click(function () {
        $('.div1').show();
    });
    $('button').eq(1).click(function () {
        $('.div1').hide();
    });
    $('button').eq(2).click(function () {
        $('.div1').show(5000);
    });
    $('button').eq(3).click(function () {
        $('.div1').hide(5000);
    });
</script>
</body>
</html>

案例：某网站品牌

mark

方法1：使用 1.7.2/jquery.min.js 版本来实现

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson4</title>
    <style>
        .cont{
            border:1px solid black;
            width: 600px;
            height: 350px;
            margin: 0 auto;
        }
        .cont ul{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .cont ul li{
            display: inline-block;
            width: 193px;
            height: 50px;
            line-height:30px;
            text-align: center;
        }
        .cont div{
            border: 1px solid #333;
            width: 50%;
            height: 35px;
            text-align: center;
            line-height: 35px;
            margin: 10px auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--完成的主要功能选中的留下-->
<div class="cont">
    <ul>
        <li><a href="#">佳能</a></li>
        <li><a href="#">富士康</a></li>
        <li><a href="#">索尼</a></li>
        <li class="hd"><a href="#">松下</a></li>
        <li class="hd"><a href="#">奥林巴斯</a></li>
        <li class="hd"><a href="#">苹果</a></li>
        <li><a href="#">三星</a></li>
        <li><a href="#">htc</a></li>
        <li><a href="#">水杯</a></li>
        <li class="hd"><a href="#">鼠标</a></li>
        <li class="hd"><a href="#">工牌</a></li>
        <li class="hd"><a href="#">键盘</a></li>
        <li class="hd"><a href="#">头盔</a></li>
        <li class="hd"><a href="#">手套</a></li>
    </ul>
    <div>显示精简品牌</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    // 点击选中消失
    var $hideItems = $('.cont .hd');
    // 单击按钮事件
    // 切换方法（允许你写多个方法）
    // 此方法在 1.12 中被废弃了
    $('.cont div').toggle(function () {
        // 第一次点击按钮品牌消失
        $hideItems.hide();
        $(this).html('显示全部品牌');
    },function () {
        // 再次点击按钮品牌出现
        $hideItems.show();
        $(this).html('显示精简品牌');
    });
</script>
</body>
</html>

slideDown() 和 slideUp() 方法

下拉显示和上滑隐藏

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1{  width: 300px; height: 300px; background-color: orange;  }
    </style>
</head>
<body>
<button>slideUp()</button>
<button>slideDown()</button>
<button>slideUp(5000)</button>
<button>slideDown(5000)</button>
<br/>
<br/>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    /**
     * 1. slideUp() 和 slideDown()
     * 描述：本方法用来设置 jq 对象上拉收起和下滑显示
     * 语法：jq对象.slideUp(动画事件ms)/jq对象.slideDown(动画时间ms)
     * 注意：slideUp 和 slideDown 方法存在隐形的属性，叫“边界”
     *      边界是一个可以设置的属性，通过定位属性 top 或 bottom 设置
     */
    $('button').eq(0).click(function () {
        $('.div1').slideUp();
    });
    $('button').eq(1).click(function () {
        $('.div1').slideDown();
    });
    $('button').eq(2).click(function () {
        $('.div1').slideUp(5000);
    });
    $('button').eq(3).click(function () {
        $('.div1').slideDown(5000);
    });
</script>
</body>
</html>

mark

slideUp 和 slideDown 方法存在隐形的属性，叫“边界”

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1{  width: 300px; height: 300px; background-color: orange;
            position: absolute;
            /*控制距离页面低部多远开始伸缩*/
            bottom: 150px;
        }
    </style>
</head>
<body>
<button>slideUp()</button>
<button>slideDown()</button>
<button>slideUp(5000)</button>
<button>slideDown(5000)</button>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    /**
     * 1. slideUp() 和 slideDown()
     * 描述：本方法用来设置 jq 对象上拉收起和下滑显示
     * 语法：jq对象.slideUp(动画事件ms)/jq对象.slideDown(动画时间ms)
     * 注意：slideUp 和 slideDown 方法存在隐形的属性，叫“边界”
     *      边界是一个可以设置的属性，通过定位属性 top 或 bottom 设置（只有在上下没有在左右）
     */
    $('button').eq(0).click(function () {
        $('.div1').slideUp();
    });
    $('button').eq(1).click(function () {
        $('.div1').slideDown();
    });
    $('button').eq(2).click(function () {
        $('.div1').slideUp(5000);
    });
    $('button').eq(3).click(function () {
        $('.div1').slideDown(5000);
    });
</script>
</body>
</html>

mark

常用的例子：

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .xiaomi{
            width: 120px;height: 300px;border: 1px solid black;
            position: absolute;margin:100px auto;margin: 100px 50%;
        }
        .xiaomi .innerChuangkou{
            width: 100%;
            height: 200px;
            position: absolute;
            bottom: 0;
            background-color: rgba(10,10,10,0.5);
            /*一开进来不可见*/
            display: none;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    正常的商品正常的商品
    <div class="innerChuangkou"></div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // 进来出现，出去消失
    var $innerChuangkou = $('.innerChuangkou');
    $('.xiaomi').mouseenter(function () {
        $innerChuangkou.stop().slideDown();
    }).mouseleave(function () {
        $innerChuangkou.stop().slideUp();
    });
</script>
</body>
</html>

mark

mark

fadeIn()和fadeOut()方法

淡入、淡出

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1{
            width: 200px;height: 200px; background-color: orange;
        }
    </style>
</head>
<body>
<button>fadeIn()</button>
<button>fadeOut()</button>
<button>fadeIn(5000)</button>
<button>fadeOut(5000)</button>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('button').eq(0).click(function () {
        $('.div1').fadeIn();
    });
    $('button').eq(1).click(function () {
        $('.div1').fadeOut();
    });
    $('button').eq(2).click(function () {
        $('.div1').fadeIn(5000);
    });
    $('button').eq(3).click(function () {
        $('.div1').fadeOut(5000);
    });
</script>
</body>
</html>

需要注意的是：

fadeIn()的起点是display:none; 而不是opacity:0;

fadeOut()的终点是display:none;也不是opacity:0;

也就是说一个元素如果想淡入，一定要给这个元素加上display:none;属性，而不要给他加上opacity:0;的属性。 同样的fadeIn()和fadeOut()的函数括号里面可以加数字，表示动画的时间。fadeIn(4000);就是用4000毫秒进行淡入。

mark

addClass()和removeClass()方法

追加类和移除类。add就是添加，remove就是移除。

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1{
            width: 200px;height: 200px;border: 1px solid black;
        }
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
<button>添加red类</button>
<button>删除red类</button>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('button').eq(0).click(function() {
        $('.div1').addClass('red');
    });
    $('button').eq(1).click(function () {
        $('.div1').removeClass('red');
    });
</script>
</body>
</html>

attr()方法

attr是英语attribute属性的简写，用来更改HTML元素的属性。之前我们在原生JS中学习过，一个元素可以”有什么属性就点什么”。

例如：document.getElementById(“tutu”).src = “2.jpg”; 实际上就是更改这个HTML元素的属性。现在在jQuery中就是用attr()方法,来更改HTML元素的属性。

语法：$(“div”).attr(“key”,”value”);

例如：$(“img”).mouseenter(function(){$(this).attr(“src”,”images/longlong.jpg”);});

鼠标进入的时候，换图，就是换图的src属性attr()也可以读属性，当只有一个参数的时候，表示读取这个东西的属性。

例如：var s = $(“img”).attr(“src”);

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson5</title>
    <style>
        .div1{
            width: 200px;height: 200px;border: 1px solid black;
        }
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
<button>添加red类</button>
<button>删除red类</button>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $('button').eq(0).click(function() {
        $('.div1').attr('class','red');
    });
    $('button').eq(1).click(function () {
        $('.div1').removeClass('red');
    });
</script>
</body>
</html>

mark

单击（覆盖属性）

mark

交叉淡入淡出轮播图

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
91
92
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        *{margin: 0;padding: 0;}
        .lunbotu{
            width: 560px; height: 300px;margin: 50px auto;
            border: 1px solid black;
            position: relative;
        }
        .lunbotu .imgUL{
            /*去掉li标签的点*/
            list-style: none;
        }
        .lunbotu .imgUL li{
            position: absolute;
            /*初始话的时候为不可见*/
            display: none;
        }
        .lunbotu .imgUL .selected{
            display: block;
        }
        .rightBtn,.leftBtn{
            width: 30px;
            height: 60px;
            background-color: rgba(10,150,10,0.5);
            position: absolute;
            font-size: 35px;
            /*top代表*/
            top: 40%;
            color: white;
            text-align: center;
            line-height: 60px;
        }
        .lunbotu .rightBtn{
            right: 0;
        }
    </style>
</head>
<body>
<div class="lunbotu">
    <ul class="imgUL">
        <li class="selected"><a href="#"><img src="img/0.jpg" alt=""/></a></li>
        <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>
    </ul>
    <div class="leftBtn"> < </div>
    <div class="rightBtn"> > </div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
        var $lis = $('.lunbotu li');
        // index 是当前正在加载的图片的序号，默认从 0 开始加载
        var index = 0;
        $('.rightBtn').click(function () {
            // 防止动画积累
            if($lis.is(':animated')){
                return;
            }
            //旧的怎么样
            $lis.eq(index).fadeOut();
            index++;
            //设置边界
            if(index == 5){
                index = 0;
            }
            //新的怎么样
            $lis.eq(index).fadeIn();
        });
        $('.leftBtn').click(function () {
            // 防止动画积累
            if($lis.is(':animated')){
                return;
            }
            $lis.eq(index).fadeOut();
            index--;
            if(index == -1){
                index = 4;
            }
            $lis.eq(index).fadeIn();
        });
</script>
</body>
</html>

交叉淡入淡出轮播图锚点

风格1

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson6</title>
    <style>
        *{margin: 0;padding: 0;}
        .lunbotu{
            width: 560px; height: 300px;margin: 50px auto;
            border: 1px solid black;
            position: relative;
        }
        .lunbotu .imgUL{
            /*去掉li标签的点*/
            list-style: none;
        }
        .lunbotu .imgUL li{
            position: absolute;
            /*初始话的时候为不可见*/
            display: none;
        }
        .lunbotu .imgUL .selected{
            display: block;
        }
        .rightBtn,.leftBtn{
            width: 30px;
            height: 60px;
            background-color: rgba(10,150,10,0.5);
            position: absolute;
            font-size: 35px;
            /*top代表*/
            top: 40%;
            color: white;
            text-align: center;
            line-height: 60px;
        }
        .lunbotu .rightBtn{
            right: 0;
        }
        .lunbotu .maodainUL{
            list-style: none;
            position: absolute;
            /*下面的距离为10px*/
            bottom: 10px;
            /*左右为 35%*/
            left: 35%;
        }
        .lunbotu .maodainUL li{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            display: inline-block;
            background-color: orange;
        }
        .maodainUL li a{
            /*去掉下划线*/
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
        .lunbotu .maodainUL .selected-li{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="lunbotu">
    <ul class="imgUL">
        <li class="selected"><a href="#"><img src="img/0.jpg" alt=""/></a></li>
        <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>
    </ul>
    <div class="leftBtn"> < </div>
    <div class="rightBtn"> > </div>
    <ul class="maodainUL">
        <li class="selected-li"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
        // 获取图片的li
        var $lis = $('.imgUL li');
        // 获取锚点的li
        var $maodians = $('.maodainUL li')
        // index 是当前正在加载的图片的序号，默认从 0 开始加载
        var index = 0;
        $('.rightBtn').click(function () {
            // 防止动画积累
            if($lis.is(':animated')){
                return;
            }
            //旧的怎么样
            $lis.eq(index).fadeOut();
            $maodians.eq(index).removeClass('selected-li');
            index++;
            //设置边界
            if(index == 5){
                index = 0;
            }
            //新的怎么样
            $lis.eq(index).fadeIn();
            $maodians.eq(index).addClass('selected-li')
        });
        $('.leftBtn').click(function () {
            // 防止动画积累
            if($lis.is(':animated')){
                return;
            }
            $lis.eq(index).fadeOut();
            $maodians.eq(index).removeClass('selected-li')
            index--;
            if(index == -1){
                index = 4;
            }
            $lis.eq(index).fadeIn();
            $maodians.eq(index).addClass('selected-li');
        });
        // 锚点的点击事件
        $maodians.click(function () {
            // 防止动画积累
            if($lis.is(':animated')){
                return;
            }
            // 旧的怎么样
            $lis.eq(index).fadeOut();
            $maodians.eq(index).removeClass('selected-li');
            // 设置 index 为点击的 li 对应的 index
            // 获取当前元素在兄弟中的序号：jq对象.index()
            index = $(this).index();
            // 新的怎么样
            $lis.eq(index).fadeIn();
            $maodians.eq(index).addClass('selected-li');
        });
</script>
</body>
</html>

mark

风格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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>三位置法轮播图</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.carousel{
			width: 560px;
			height: 300px;
			margin: 50px auto;
			position: relative;
			border: 10px solid #ccc;
		}
		.carousel .btns span{
			position: absolute;
			width: 40px;
			height: 40px;
			top: 50%;
			margin-top: -20px;
			background-color: orange;
			cursor: pointer;
		}
		.carousel .btns span.leftBtn{
			left: 10px;
		}
		.carousel .btns span.rightBtn{
			right:10px;
		}
		
		.carousel ul{
			list-style: none;
		}
		.carousel ul li{
			position: absolute;
			left: 560px;
			top: 0;
		}
		.carousel ul li.first{
			left: 0;
		}
	</style>
</head>
<body>
	<div class="carousel">
		<ul>
			<li class="first"><a href="#"><img src="img/0.jpg" alt="" /></a></li>
			<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>
		</ul>
		<div class="btns">
			<span class="leftBtn"></span>
			<span class="rightBtn"></span>
		</div>
	</div>
	<script src="js/jquery-1.12.3.min.js"></script>
	<script>
		//信号量
		var idx = 0;
		//右按钮的事件监听
		$(".rightBtn").click(function(){
			//改变之前，老图往-560移动
			$("li").eq(idx).animate({"left":-560},600);
			//信号量改变
			idx++;
			if(idx > 4){
				idx = 0;
			}
			//信号量改变之后，新图先瞬间移动到560，然后往0移动
			$("li").eq(idx).css("left",560).animate({"left":0},600);
		});
		//左按钮的事件监听
		$(".leftBtn").click(function(){
			//改变之前，老图往560移动
			$("li").eq(idx).animate({"left":560},600);
			
			//信号量改变
			idx--;
			if(idx < 0){
				idx = 4;
			}
			
			//信号量改变之后，新图先瞬间移动到-560，然后往0移动
			$("li").eq(idx).css("left",-560).animate({"left":0},600);
		});
	</script>
</body>
</html>

mark

mark

风格3

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>火车法轮播图</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.carousel{
			width: 560px;
			height: 300px;
			margin: 50px auto;
			position: relative;
			border: 10px solid #ccc;
			/*ovh*/
		}
		.carousel .btns span{
			position: absolute;
			width: 40px;
			height: 40px;
			top: 50%;
			margin-top: -20px;
			background-color: orange;
			cursor: pointer;
		}
		.carousel .btns span.leftBtn{
			left: 10px;
		}
		.carousel .btns span.rightBtn{
			right:10px;
		}
		.carousel ul{
			list-style: none;
			/*布局的难点，一定要记住ul要宽一点，否则li不能并排*/
			width: 8000px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.carousel ul li{
			float: left;
			width: 560px;
		}
	</style>
</head>
<body>
	<div class="carousel">
		<ul>
			<li><a href="#"><img src="img/0.jpg" alt="" /></a></li>
			<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>
		</ul>
		<div class="btns">
			<span class="leftBtn"></span>
			<span class="rightBtn"></span>
		</div>
	</div>
	<script src="js/jquery-1.12.3.min.js"></script>
	<script>
		//得到ul
		var $ul = $(".carousel ul");
		//克隆第一张图片，追加到图片列表末尾
		//clone()就是克隆，就是复制一下，然后apeendTo就是把克隆的这张图片追加到ul末尾。
		$(".carousel ul li:first").clone().appendTo(".carousel ul");
		//信号量，表示当前是第几张图片
		var idx = 0;
		//点击右按钮，做的事情
		$(".rightBtn").click(function(){
			//防止流氓
			if($ul.is(":animated")){
				return;
			}
			//信号量增加
			idx++;   //我们允许信号量临时等于5一下。
			//先拉动，后瞬移
			$ul.animate({"left":-560 * idx},600,function(){
				//如果idx大于了4，那么就瞬间移动回来：
				if(idx > 4){
					idx = 0;
					$(this).css("left",0);
				}
			});
		});
		$(".leftBtn").click(function(){
			//防止流氓
			if($ul.is(":animated")){
				return;
			}
			//信号量变化
			idx--;
			//先瞬移再拉，如果信号量小于了0，那么信号量为4。
			if(idx == 0){
				idx = 4;
				//往下标为5的，就是猫腻那张图片瞬移
				$ul.css("left",-560 * 5);
			}
			$ul.animate({"left":-560 * idx} , 600);
		});
	</script>
</body>
</html>

mark

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson1</title>
    <style>
       .div1{
           width: 100px;
           height: 100px;
           background-color: orange;
       }
       .div2{
           width: 100px;
           height: 100px;
           background-color: skyblue;
           border: 1px solid black;
       }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
    var $div1 = $('.div1');
    var $div2 = $('.div2');
    $div1.click(function () {
        $(this).animate({'width':'500px'},1500);
    });
    $div2.click(function () {
        $(this).animate({'width':'500px','height':'200px','background-color':'red'},1500);
    });
    /**
     * animate() 方法
     * 描述：jq提供了一个用来自定义动画的方法
     * 语法：jq.animate（动画结束状态JSON，动画时间 ms，动画线性运动，回掉函数function）;
     * 说明：
     * 【1】前面两个参数为必要参数，后面两个参数为可选参数
     * 【2】第一个参数格是 json 格式，哪怕只有一个属性
     * 【3】
     * 【4】
     * 局限：jquery 框架中提供的 animate() 方法只能够修改可以量化的属性，对于颜色&display 等无法量化的属性则不能够生效
     * 如果想要颜色的改变，则需要引入 jquery.color.js 插件
     */
</script>
</body>
</html>

动画顺序

jq中动画的执行遵循两大原则：

同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行。

异步原则：不同元素如果存在多个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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson1</title>
    <style>
       .div1{
           width: 100px;
           height: 100px;
           background-color: orange;
       }
       .div2{
           width: 100px;
           height: 100px;
           background-color: skyblue;
           border: 1px solid black;
       }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
    var $div1 = $('.div1');
    var $div2 = $('.div2');
    // 同步执行
    // $div1.click(function () {
    //     $(this).animate({'width':'500px'},1500)
    //            .animate({'height':300},1500);
    // });
    $div1.animate({'width':'500px'},1500).animate({'height':300},1500);
    $div2.animate({'width':'300px'},3000);
    /**
     * animate() 方法
     * 描述：jq提供了一个用来自定义动画的方法
     * 语法：jq.animate（动画结束状态JSON，动画时间 ms，动画线性运动，回掉函数function）;
     * 说明：
     * 【1】前面两个参数为必要参数，后面两个参数为可选参数
     * 【2】第一个参数格是 json 格式，哪怕只有一个属性
     * 局限：jquery 框架中提供的 animate() 方法只能够修改可以量化的属性，对于颜色&display 等无法量化的属性则不能够生效
     * 如果想要颜色的改变，则需要引入 jquery.color.js 插件
     * 动画顺序
     * 原则：
     * 同步原则:同一个元素如果存在多个 animate 命令，则按照添加顺序执行
     * 异步原则:不同元素如果存在多个 animate 命令，则他们同时执行
     */
</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
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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson1</title>
    <style>
       .div1{
           width: 100px;
           height: 100px;
           background-color: orange;
       }
       .div2{
           width: 100px;
           height: 100px;
           background-color: skyblue;
           border: 1px solid black;
       }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
    var $div1 = $('.div1');
    var $div2 = $('.div2');
    // 同步执行
    // $div1.click(function () {
    //     $(this).animate({'width':'500px'},1500)
    //            .animate({'height':300},1500);
    // });
    $div1.animate({'width':'500px'},1500).animate({'height':300},1500,function () {
        $(this).css('background-color','red');
    });
    $div2.animate({'width':'300px'},3000,function () {
        $(this).css('background-color','red');
    });
    /**
     * animate() 方法
     * 描述：jq提供了一个用来自定义动画的方法
     * 语法：jq.animate（动画结束状态JSON，动画时间 ms，动画线性运动，回掉函数function）;
     * 说明：
     * 【1】前面两个参数为必要参数，后面两个参数为可选参数
     * 【2】第一个参数格是 json 格式，哪怕只有一个属性
     * 【3】第三个参数如果写出 'linear' ,则表示线性运动，否则为加快在再减速
     * 【4】回调函数
     * 局限：jquery 框架中提供的 animate() 方法只能够修改可以量化的属性，对于颜色&display 等无法量化的属性则不能够生效
     * 如果想要颜色的改变，则需要引入 jquery.color.js 插件
     * 动画顺序
     * 原则：
     * 同步原则:同一个元素如果存在多个 animate 命令，则按照添加顺序执行
     * 异步原则:不同元素如果存在多个 animate 命令，则他们同时执行
     */
</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
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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson1</title>
    <style>
       .div1{
           width: 100px;
           height: 100px;
           background-color: orange;
           position: absolute;
       }
       .div2{
           width: 100px;
           height: 100px;
           background-color: skyblue;
           border: 1px solid black;
           position: absolute;
           top: 150px;
       }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
    var $div1 = $('.div1');
    var $div2 = $('.div2');
    $div1.animate({'left':'500px'},2500,function () {
        $(this).css('background-color','red');
    });
    $div2.animate({'left':'500px'},2500,'linear',function () {
        $(this).css('background-color','red');
    });
    /**
     * animate() 方法
     * 描述：jq提供了一个用来自定义动画的方法
     * 语法：jq.animate（动画结束状态JSON，动画时间 ms，动画线性运动，回掉函数function）;
     * 说明：
     * 【1】前面两个参数为必要参数，后面两个参数为可选参数
     * 【2】第一个参数格是 json 格式，哪怕只有一个属性
     * 【3】第三个参数如果写出 'linear' ,则表示线性运动，否则为加快在再减速
     * 【4】回调函数
     * 局限：jquery 框架中提供的 animate() 方法只能够修改可以量化的属性，对于颜色&display 等无法量化的属性则不能够生效
     * 如果想要颜色的改变，则需要引入 jquery.color.js 插件
     * 动画顺序
     * 原则：
     * 同步原则:同一个元素如果存在多个 animate 命令，则按照添加顺序执行
     * 异步原则:不同元素如果存在多个 animate 命令，则他们同时执行
     */
</script>
</body>
</html>

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{
            width: 100px;height: 100px;background-color: orange;position: absolute;
        }
    </style>
</head>
<body>
<button>stop()</button>
<button>stop(false,false)</button>
<button>stop(false,true)</button>
<button>stop(true,false)</button>
<button>stop(true,true)</button>
<div class="div1"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $div1 =  $('.div1');
    $btns = $('button');
    $btns.eq(0).click(function () {
        $div1.stop();
    });
    $btns.eq(1).click(function () {
        $div1.stop(false,false);
    });
    $btns.eq(2).click(function () {
        $div1.stop(false,true);
    });
    $btns.eq(3).click(function () {
        $div1.stop(false,true);
    });
    $btns.eq(4).click(function () {
        $div1.stop(true,true);
    });
    $div1.animate({'left':800},5000)
        .animate({'top':400},5000)
        .animate({'left':50},5000)
        .animate({'top':50},5000);
    /**
     * stop() 方法
     * 描述：stop() 方法的作用用于停止jq对象的动画
     * 语法：jq对象.stop(clearAllAnimation,gotoEnd)
     * 说明：
     * 【1】stop 方法的两个语法都是布尔值类型，并且都是可选参数，默认为 false
     * 【2】第一个参数代表是否清空jq对象动画队列中所有未完成的动画。false表示不清空所有未完成的动画，
     *      只清空当前正在执行的动画
     * 【3】第二个参数代表是否立即完成当前动画（去到动画的终点）。false表示不去终点位置，而是停留在清除瞬间所在的这个位置。
     */
</script>
</body>
</html>

动画积累的防止

animate()方法中的防止动画积累的策略就是如下的实现方式。

策略1：立即结束当前动画，执行新的命令：$().stop(true).animate();

策略2：如果当前正在运动，那么不接收新的命令：if($(“div”).is(“:animated”)){ return;} 新的动画命令

百叶窗例子

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .byc{
            width: 800px;
            height: 300px;
            position: relative;
            margin: 80px auto;
            /*把多余的隐藏起来*/
            overflow: hidden;
        }
        .byc ul{
            list-style: none;
        }
        .byc ul li{
            /*绝对定位*/
            position: absolute;
        }
        .li1{
            left:160px;
        }
        .li2{
            left:320px;
        }
        .li3{
            left:480px;
        }
        .li4{
            left:640px;
        }
        .byc ul li .cover{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
<div class="byc">
    <ul>
        <li class="li0">
            <div class="cover"></div>
            <a href="#"><img src="img/0.jpg" alt=""/></a>
        </li>
        <li class="li1">
            <div class="cover"></div>
            <a href="#"><img src="img/1.jpg" alt=""/></a>
        </li>
        <li class="li2">
            <div class="cover"></div>
            <a href="#"><img src="img/2.jpg" alt=""/></a>
        </li>
        <li class="li3">
            <div class="cover"></div>
            <a href="#"><img src="img/3.jpg" alt=""/></a>
        </li>
        <li class="li4">
            <div class="cover"></div>
            <a href="#"><img src="img/4.jpg" alt=""/></a>
        </li>
    </ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    var $lis = $('.byc li');
    $lis.mouseenter(function () {
        $(this).find('.cover').stop(true).fadeOut();
    }).mouseleave(function () {
        $(this).find('.cover').stop(true).fadeIn();
        $lis.stop(true);
        $lis.eq(1).animate({'left':160},500);
        $lis.eq(2).animate({'left':320},500);
        $lis.eq(3).animate({'left':480},500);
        $lis.eq(4).animate({'left':640},500);
    });
    $lis.eq(0).mouseenter(function () {
        $lis.stop(true);
        $lis.eq(1).animate({'left':560},500);
        $lis.eq(2).animate({'left':620},500);
        $lis.eq(3).animate({'left':680},500);
        $lis.eq(4).animate({'left':740},500);
    });
    $lis.eq(1).mouseenter(function () {
        $lis.stop(true);
        $lis.eq(1).animate({'left':60},500);
        $lis.eq(2).animate({'left':620},500);
        $lis.eq(3).animate({'left':680},500);
        $lis.eq(4).animate({'left':740},500);
    });
    $lis.eq(2).mouseenter(function () {
        $lis.stop(true);
        $lis.eq(1).animate({'left':60},500);
        $lis.eq(2).animate({'left':120},500);
        $lis.eq(3).animate({'left':680},500);
        $lis.eq(4).animate({'left':740},500);
    });
    $lis.eq(3).mouseenter(function () {
        $lis.stop(true);
        $lis.eq(1).animate({'left':60},500);
        $lis.eq(2).animate({'left':120},500);
        $lis.eq(3).animate({'left':180},500);
        $lis.eq(4).animate({'left':740},500);
    });
    $lis.eq(4).mouseenter(function () {
        $lis.stop(true);
        $lis.eq(1).animate({'left':60},500);
        $lis.eq(2).animate({'left':120},500);
        $lis.eq(3).animate({'left':180},500);
        $lis.eq(4).animate({'left':240},500);
    });
</script>
</body>
</html>

mark

坚持原创技术分享，您的支持将鼓励我继续创作！