前端–jQuery动画效果
1. 案例引入jq动画
img
1.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
| <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>突出显示</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
#box {
width: 640px;
margin: 100px auto 0px;
border: 1px solid #ccc;
}
img {
display: block;
}
ul {
padding-bottom: 10px;
}
#box > ul > li {
float: left;
margin-left: 10px;
margin-top: 10px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("#box>ul").on("mouseenter", "li", function () {
$(this).siblings().stop().fadeTo(1000, 0.4);
}).on("mouseleave", "li", function () {
$(this).siblings().stop().fadeTo(1000, 1);
})
});
</script>
</head>
<body bgcolor="black">
<div id="box">
<ul class="clearfix">
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jpg" alt=""></li>
<li><img src="img/06.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
|
1.2 右下角广告
slideDown是显示，显示的方向跟定位的方向有关。
- 设置top slideDown是向下
- 如果定位bottom ，那么slideDown就是向上拉动显示。
动画函数里面有两个参数，第一个参数是动画执行的时间，第二个参数是回调函数。动画执行完成后执行的函数。
- 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
| <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>右下角广告</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#box {
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("#box").hide();
$("#btn").click(function () {
$("#box").slideDown(1000).slideUp(1000).fadeIn(1000);
})
});
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box">
<img src="img/01.jpg" alt="">
</div>
</body>
</html>
|
2. animate定义动画
animate({},1000,fun);
- {} 属性值与原属性有差值，才会有动画效果。
- 1000 动画执行的时间。
- fun 回调函数。动画执行完成后，执行当前函数。
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
| <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#box {
width: 80px;
height: 80px;
background-color: lightgreen;
position: relative;
left: 0px;
top: 0px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("button:eq(0)").click(function () {
$("#box").animate({"left": "400px"}, 1000);
$("#box").animate({"top": "400px"}, 1000);
$("#box").animate({"left": "0px"}, 1000);
$("#box").animate({"top": "0px"}, 1000);
});
$("button:eq(1)").click(function () {
$("#box").animate({"left": "400px", "top": "400px"}, 1000);
});
$("button:eq(2)").click(function () {
$("#box").animate({"width": "400px", "height": "400px"}, 1000);
});
});
</script>
</head>
<body>
<button>转圈</button>
<button>对角</button>
<button>放大</button>
<div id="box"></div>
</body>
</html>
|
2.1 先探CSS3动画
transform: rotate(360deg);
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 lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS3动画</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#box {
width: 200px;
height: 200px;
position: fixed;
top: 150px;
left: 150px;
}
#box > img {
width: 200px;
height: 200px;
}
img {
transition: all 1s;
}
/*img:hover {*/
/* transform: rotate(360deg);*/
/*}*/
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("img").mouseenter(function () {
$("img").css("transform", "rotate(360deg)");
}).mouseleave(function () {
$("img").css("transform", "rotate(0deg)");
})
});
</script>
</head>
<body>
<div id="box">
<img src="img/04.jpg" alt="">
</div>
</body>
</html>
|
2.2 jq实现手风琴效果☆
案例所用图片
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 lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
#box {
width: 1200px;
margin: 100px auto 0px;
border: 1px solid #ccc;
overflow: hidden;
}
#box > ul {
width: 1300px;
}
#box > ul > li {
width: 200px;
float: left;
/*transition:1s;*/
}
#box > ul > li > img {
display: block;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/**
* 由于快速滑动的时候，每个li都在计算宽度，会出现微小的误差，
* 有可能，有li宽度总和会大于1200px ，
* 会造成浮动的盒子换行，还有可能小于1200px,右边会出现小白边。
* 解决方案：
* 1.给ul宽度设置大于1200px,给1300px.
* 2.让每个li宽度都大于200px 可以给202px.让移动上去的时候，盒子缩小后宽度大于140px,可以给142px。
*/
$(function () {
// $("#box>ul").on("mouseenter", "li", function () {
// $(this).css("width", "500px").siblings().css("width", "140px")
// }).on("mouseleave", "li", function () {
// $(this).css("width", "200px").siblings().css("width", "200px");
// })
$("#box>ul").on("mouseenter", "li", function () {
$(this).stop().animate({"width": "500px"}, 1000).siblings().stop().animate({"width": "140px"}, 1000);
}).on("mouseleave", "li", function () {
// $(this).stop().animate({"width":"200px"},1000).siblings().stop().animate({"width":"200px"},1000);
$("#box>ul>li").stop().animate({"width": "200px"}, 1000);
})
});
</script>
</head>
<body>
<div id="box">
<ul class="clearfix">
<li><img src="img/pic/01.jpg" alt=""></li>
<li><img src="img/pic/02.jpg" alt=""></li>
<li><img src="img/pic/03.jpg" alt=""></li>
<li><img src="img/pic/04.jpg" alt=""></li>
<li><img src="img/pic/05.jpg" alt=""></li>
<li><img src="img/pic/06.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
|
☆
