七夕项目js实现-2-2

2-2页面之间的卷滚切换效果

前言

​ 本节主要用到了css3的一个过渡属性,做本节之前可以上w3c去看下css3的transform用法,其实也没什么高深的东西。
​ 有视频的课大家直接看视频,我直接对着没视频的课代码撸起!
​ 请注意章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

  1. 使用css3属性版本

    贴出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
    <script type="text/javascript">
    // 获取第一个子节点
    var container = document.getElementById('content');
    // 获取ul
    var element = container.getElementsByClassName('content-wrap');
    // 获取li
    var slides = element[0].getElementsByTagName("li");
    // 获取容器尺寸 offset属性,获取自身的宽高
    var width = container.offsetWidth;
    var height = container.offsetHeight;
    // 设置ul总宽度
    element[0].style.width = (width * slides.length) + 'px';
    element[0].style.height = height + 'px';
    // 设置每一个li的尺寸
    for (var i = 0; i < slides.length; i++) {
    slides[i].style.height = height + 'px';
    slides[i].style.width = width + 'px';
    }
    var button = document.getElementsByTagName('button');
    // 绑定一个事件,触发通过
    button[0].addEventListener('click', function () {
    // 在5秒的时间内,移动X的位置,为2个页面单位
    element[0].style.transition = 'all 5000ms linear';
    element[0].style.transform = 'translatex(-' + width * 2 + 'px)'

    })
    </script>

    其实与上一节课程对比,只是加了一个button的点击事件。在事件触发后,给ul标签加一个过渡效果。
    transition:接收四个参数:

    ​ 1.指定过渡的css属性;
    ​ 2.过渡时间;
    ​ 3.过渡效果(匀速,先快后慢等);
    ​ 4.过渡开始时间。
    transform:要执行的动画效果,一堆方法,自己看w3c吧。这里用到的是X轴平移方法translateX()

  2. 使用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
    <script type="text/javascript">
    // 获取第一个子节点
    var container = document.getElementById('content');
    // 获取ul
    var element = container.getElementsByClassName('content-wrap');
    // 获取li
    var slides = element[0].getElementsByTagName("li");
    // 获取容器尺寸 offset属性,获取自身的宽高
    var width = container.offsetWidth;
    var height = container.offsetHeight;
    // 设置ul总宽度
    element[0].style.width = (width * slides.length) + 'px';
    element[0].style.height = height + 'px';
    // 设置每一个li的尺寸
    for (var i = 0; i < slides.length; i++) {
    slides[i].style.height = height + 'px';
    slides[i].style.width = width + 'px';
    }
    var button = document.getElementsByTagName('button');
    // 绑定一个事件,触发通过
    var timer = null;
    button[0].addEventListener('click', function () {
    // 在5秒的时间内,移动X的位置,为2个页面单位
    var num = 0
    timer = setInterval(function () {
    num++;
    if (num < width * 2) {
    element[0].style.left = -num + 'px';
    }
    else {
    clearInterval(timer);
    timer = null;
    }
    }, 1)
    })
    </script>

结束语

本节也没什么难点,就是让ul标签沿着x轴从左向右动起来。大家好好理解下。

代码我已上传百度云盘,欢迎大家下载查看。。。
链接:http://pan.baidu.com/s/1nvt9Qsh 密码:pexw
如有疑问请在下方留言。。。

:只对script内的内容作了修改。html,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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

ul,
li {
list-style-type: none;
}
/*主体部分*/

#content {
width: 100%;
height: 100%;
/* top: 20%;
left: 20%; */
overflow: hidden;
position: absolute;
}

.content-wrap {
position: relative;
}

.content-wrap>li {
width: 100%;
height: 100%;
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}

li:nth-child(2) {
background: #9BCD9B;
}

li:nth-child(3) {
background: yellow;
}

button {
width: 100px;
height: 50px;
}

.button {
position: absolute;
bottom: 0;
}
</style>
</head>

<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
<div class="button">
<button>点击切换页面</button>
</div>
</div>
<script type="text/javascript">
// 获取第一个子节点
var container = document.getElementById('content');
// 获取ul
var element = container.getElementsByClassName('content-wrap');
// 获取li
var slides = element[0].getElementsByTagName("li");
// 获取容器尺寸 offset属性,获取自身的宽高
var width = container.offsetWidth;
var height = container.offsetHeight;
// 设置ul总宽度
element[0].style.width = (width * slides.length) + 'px';
element[0].style.height = height + 'px';
// 设置每一个li的尺寸
for (var i = 0; i < slides.length; i++) {
slides[i].style.height = height + 'px';
slides[i].style.width = width + 'px';
}
var button = document.getElementsByTagName('button');
// 绑定一个事件,触发通过
var timer = null;
button[0].addEventListener('click', function () {
// 在5秒的时间内,移动X的位置,为2个页面单位
// css3实现
element[0].style.transition = 'all 5000ms linear';
element[0].style.transform = 'translatex(-' + width * 2 + 'px)';
// js+定时器实现
// var num = 0 ;
// timer = setInterval(function () {
// num = num + 5;
// if (num < width * 2) {
// element[0].style.left = -num + 'px';
// }
// else {
// clearInterval(timer);
// timer = null;
// }
// }, 10)
})
</script>
</body>
</html>