css文件夹下:test.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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167body,ul{ margin:0; padding:0; } ul{list-style:none;} .pages_con{ position:fixed; left:0; top:0; width:100%; overflow:hidden; } .pages{ height:600px; position:relative; } .page1{ background-color:orange;} .page2{ background-color:lightgreen;} .page3{ background-color:cyan;} .page4{ background-color:pink;} .page5{ background-color:lightblue;} .points{ width:16px; height:176px; position:fixed; right:20px; top:50%; margin-top:-88px; } .points li{ width:13px; height:13px; margin:16px 0; border-radius:50%; border:1px solid #666; cursor:pointer; } .points li.active{ background-color:#666; } .main_con{ width:900px; height:400px; position:absolute; left:50%; top:50%; margin-left:-450px; margin-top:-200px; } .main_con .left_img{ width:363px; height:400px; float:left; position:relative; left:-50px; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .main_con .right_info{ width:500px; height:300px; margin-top:50px; float:right; font-family:'Microsoft Yahei'; font-size:20px; line-height:50px; color:#666; text-indent:2em; text-align:justify; position:relative; right:-50px; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .moving .main_con .left_img{ left:0; opacity:1; filter:alpha(opacity=100); } .moving .main_con .right_info{ right:0; opacity:1; filter:alpha(opacity=100); } .main_con .right_img{ width:522px; height:400px; float:right; position:relative; top:-50px; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .main_con .left_info{ width:350px; height:300px; margin-top:50px; float:left; font-family:'Microsoft Yahei'; font-size:20px; line-height:50px; color:#666; text-indent:2em; text-align:justify; position:relative; bottom:-50px; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .moving .main_con .right_img{ top:0; opacity:1; filter:alpha(opacity=100); } .moving .main_con .left_info{ bottom:0; opacity:1; filter:alpha(opacity=100); } .main_con .center_img{ width:611px; height:337px; position:absolute; left:50%; margin-left:-305px; bottom:-50px; opacity:0; filter:alpha(opacity=0); transition:all 1000ms ease 300ms; } .moving .main_con .center_img { bottom:0; opacity:1; filter:alpha(opacity=100); }
整屏滚动.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
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<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>整页滚动</title> <link rel="stylesheet" type="text/css" href="css/test.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript"> $(function(){ var $screen = $('.pages_con'); var $pages = $('.pages'); var $len = $pages.length; var $h = $(window).height(); var $points = $('.points li'); var timer = null; var $nowscreen = 0; $pages.css({'height':$h}); $pages.eq(0).addClass('moving'); $points.click(function(){ $nowscreen = $(this).index(); $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); $screen.animate({'top':-$h*$nowscreen},300); $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); }) $(window).mousewheel(function(event,dat){ clearTimeout(timer); timer = setTimeout(function(){ if(dat==-1) { $nowscreen++; } else { $nowscreen--; } if($nowscreen<0) { $nowscreen=0; } if($nowscreen>$len-1) { $nowscreen=$len-1; } $screen.animate({'top':-$h*$nowscreen},300); $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); },200) }) }) </script> </head> <body> <div class="pages_con"> <div class="pages page1"> <div class="main_con"> <div class="left_img"><img src="images/001.png"></div> <div class="right_info"> Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。 </div> </div> </div> <div class="pages page2"> <div class="main_con"> <div class="right_img"><img src="images/002.png"></div> <div class="left_info"> 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。 </div> </div> </div> <div class="pages page3"> <div class="main_con"> <div class="left_img"><img src="images/004.png"></div> <div class="right_info"> 以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。 </div> </div> </div> <div class="pages page4"> <div class="main_con"> <div class="left_img"><img src="images/003.png"></div> <div class="right_info"> Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。 </div> </div> </div> <div class="pages page5"> <div class="main_con"> <div class="center_img"><img src="images/005.png"></div> </div> </div> </div> <ul class="points"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
最后
以上就是还单身篮球最近收集整理的关于整屏滚动的全部内容,更多相关整屏滚动内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复