Skip to content

Commit a02e898

Browse files
zhouxiaotianzhouxiaotian
committed
AJAX&NODE
1 parent 4572daf commit a02e898

125 files changed

Lines changed: 4998 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎10期JS正式课/正式课第九周/20161112/1.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<link rel="stylesheet" href="css/reset.min.css"/>
7+
<style>
8+
html, body {
9+
width: 100%;
10+
height: 100%;
11+
overflow: hidden;
12+
}
13+
14+
.box {
15+
/*--让一个盒子在页面水平和垂直都居中的位置--*/
16+
/*所有的浏览器都兼容
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
margin: -100px 0 0 -100px;
21+
*/
22+
/*IE低版本浏览器不兼容
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
right: 0;
27+
bottom: 0;
28+
margin: auto;
29+
*/
30+
/*使用CSS3中的FLEX BOX来处理*/
31+
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
margin: -100px 0 0 -100px;
36+
width: 200px;
37+
height: 200px;
38+
background: green;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div class="box" id="box"></div>
44+
<script>
45+
var oBox = document.getElementById('box');
46+
oBox.onclick = function () {
47+
console.log(1);
48+
};
49+
50+
oBox.ondblclick = function () {
51+
console.log(2);
52+
};
53+
54+
</script>
55+
</body>
56+
</html>

‎10期JS正式课/正式课第九周/20161112/2.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
7+
<title></title>
8+
<link rel="stylesheet" href="css/reset.min.css"/>
9+
<style>
10+
html, body {
11+
width: 100%;
12+
height: 100%;
13+
overflow: hidden;
14+
}
15+
16+
.box {
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
margin: -100px 0 0 -100px;
21+
width: 200px;
22+
height: 200px;
23+
background: green;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="box" id="box"></div>
29+
<script>
30+
var oBox = document.getElementById('box');
31+
oBox.addEventListener('touchstart', function (e) {
32+
//console.dir(e);//->TouchEvent:手指事件对象
33+
/*
34+
* 在以下的两个属性中存储了当前手指的位置信息。因为可能会出现多个手指操作,为了最后能把每一个手指信息都记录下来,所以提供了touches/changeTouches这两个touchList集合，索引为零这一项是第一根手指的操作信息...
35+
* touches:只要手指在屏幕上就可以获取到当前最新的手指位置信息,在touchend事件中我们是无法获取到touches的
36+
* changedTouches:如果只有一根手指的操作的话,和touches获取的值是一模一样的,并且在touchend触发的时候,它里面依然存储着手指的相关信息
37+
*/
38+
var point = e.changedTouches[0];
39+
this['strX'] = point.pageX;
40+
this['strY'] = point.pageY;
41+
this['changeX'] = 0;
42+
this['changeY'] = 0;
43+
this['isMove'] = false;//->是否发生移动,默认是没有发生的
44+
}, false);
45+
oBox.addEventListener('touchmove', function (e) {
46+
var point = e.changedTouches[0];
47+
this['changeX'] = point.pageX - this['strX'];
48+
this['changeY'] = point.pageY - this['strY'];
49+
50+
//->验证是否发生过偏移
51+
if (Math.abs(this['changeX']) > 10 || Math.abs(this['changeY']) > 10) {
52+
this['isMove'] = true;
53+
}
54+
}, false);
55+
oBox.addEventListener('touchend', function (e) {
56+
var isMove = this['isMove'];
57+
if (!isMove) {
58+
//->没有移动就是点击
59+
this.style.backgroundColor = 'red';
60+
return;
61+
}
62+
//->滑动
63+
this.style.backgroundColor = 'black';
64+
}, false);
65+
</script>
66+
</body>
67+
</html>

‎10期JS正式课/正式课第九周/20161112/3.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
7+
<title></title>
8+
<link rel="stylesheet" href="css/reset.min.css"/>
9+
<style>
10+
html, body {
11+
width: 100%;
12+
height: 100%;
13+
overflow: hidden;
14+
}
15+
16+
.box {
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
margin: -100px 0 0 -100px;
21+
width: 200px;
22+
height: 200px;
23+
background: green;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="box" id="box"></div>
29+
<!--
30+
fastclick:专门用来处理移动端click事件的300ms延迟的
31+
->首先它采用的是事件委托方式
32+
->它会把原代码中所有的click事件统一替换为使用touchstart、touchmove、touchend处理的方式
33+
->FastClick.attach(document.body) 把BODY容器中所有应用click事件的300ms延迟给处理了: FastClick.attach([container])
34+
-->
35+
<script src="js/fastclick.min.js"></script>
36+
<script>
37+
FastClick.attach(document.body);
38+
39+
40+
var oBox = document.getElementById('box');
41+
oBox.addEventListener('click', function () {
42+
this.style.backgroundColor = 'red';
43+
}, false);
44+
</script>
45+
</body>
46+
</html>

‎10期JS正式课/正式课第九周/20161112/4.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
7+
<title></title>
8+
<link rel="stylesheet" href="css/reset.min.css"/>
9+
<style>
10+
html, body {
11+
width: 100%;
12+
height: 100%;
13+
overflow: hidden;
14+
}
15+
16+
.box {
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
margin: -100px 0 0 -100px;
21+
width: 200px;
22+
height: 200px;
23+
background: green;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="box" id="box"></div>
29+
<script>
30+
31+
32+
33+
34+
35+
</script>
36+
</body>
37+
</html>

‎10期JS正式课/正式课第九周/20161112/css/cube.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
html {
2+
font-size: 100px; /*我们假设在640PX的设计稿中,1REM=100PX*/
3+
}
4+
5+
html, body {
6+
width: 100%;
7+
height: 100%;
8+
overflow: hidden;
9+
}
10+
11+
.cube {
12+
width: 100%;
13+
height: 100%;
14+
background: url("../img/zf_cubeBg.jpg") no-repeat;
15+
background-size: cover; /*容器背景图大小设置用COVER比100%会更合适,它会按照背景图片的比例填满整个容器,这样背景图不会变形*/
16+
17+
/*这个是我们立方体展示的舞台,我们想要看到舞台上的3D魔方需要距离舞台远一些->调整视距*/
18+
perspective: 2000px;
19+
}
20+
21+
.cube .box {
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
margin: -2.55rem 0 0 -2.55rem;
26+
width: 5.1rem;
27+
height: 5.1rem;
28+
29+
/*想让哪个盒子实现3D变形,我们需要设置3D变形属性*/
30+
-webkit-transform-style: preserve-3d;
31+
transform-style: preserve-3d;
32+
33+
/*设置3D盒子开始位置的坐标点(中心点):center center 0 是默认值*/
34+
-webkit-transform-origin: center center 0;
35+
transform-origin: center center 0;
36+
37+
/*刚开始让盒子旋转一定的角度,这样看到一个立方体的效果*/
38+
-webkit-transform: scale(0.6) rotateX(45deg) rotateY(45deg);
39+
transform: scale(0.6) rotateX(45deg) rotateY(45deg);
40+
41+
/*为了能够让其旋转的时候有动画的效果,我们给其加一个过渡动画Transition*/
42+
-webkit-transition: all .5s;
43+
transition: all .5s;
44+
}
45+
46+
.cube .box img {
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
margin: -2.55rem 0 0 -2.55rem;
51+
width: 100%;
52+
height: 100%;
53+
}
54+
55+
/*正面*/
56+
.cube .box img:nth-child(1) {
57+
-webkit-transform: translateZ(2.55rem);
58+
transform: translateZ(2.55rem);
59+
}
60+
61+
/*反面*/
62+
.cube .box img:nth-child(2) {
63+
-webkit-transform: translateZ(-2.55rem) rotateY(180deg);
64+
transform: translateZ(-2.55rem) rotateY(180deg);
65+
}
66+
67+
/*左侧面*/
68+
.cube .box img:nth-child(3) {
69+
-webkit-transform: translateX(-2.55rem) rotateY(-90deg);
70+
transform: translateX(-2.55rem) rotateY(-90deg);
71+
}
72+
73+
/*右侧面*/
74+
.cube .box img:nth-child(4) {
75+
-webkit-transform: translateX(2.55rem) rotateY(90deg);
76+
transform: translateX(2.55rem) rotateY(90deg);
77+
}
78+
79+
/*上侧面*/
80+
.cube .box img:nth-child(5) {
81+
-webkit-transform: translateY(-2.55rem) rotateX(-90deg);
82+
transform: translateY(-2.55rem) rotateX(-90deg);
83+
}
84+
85+
/*下侧面*/
86+
.cube .box img:nth-child(6) {
87+
-webkit-transform: translateY(2.55rem) rotateX(90deg);
88+
transform: translateY(2.55rem) rotateX(90deg);
89+
}

‎10期JS正式课/正式课第九周/20161112/css/reset.min.css‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课第九周/20161112/cube.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
7+
<title>珠峰培训</title>
8+
<link rel="stylesheet" href="css/reset.min.css"/>
9+
<link rel="stylesheet" href="css/cube.css"/>
10+
<script>
11+
/*根据当前屏幕的宽度动态调整REM和PX换算的比例,比例一但改变,之前在CSS中设置的REM单位的值都会跟着改变->REM响应式布局开发*/
12+
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
13+
</script>
14+
</head>
15+
<body>
16+
<section class="cube" id="cube">
17+
<div class="box">
18+
<img src="img/zf_cube1.png" alt=""/>
19+
<img src="img/zf_cube2.png" alt=""/>
20+
<img src="img/zf_cube3.png" alt=""/>
21+
<img src="img/zf_cube4.png" alt=""/>
22+
<img src="img/zf_cube5.png" alt=""/>
23+
<img src="img/zf_cube6.png" alt=""/>
24+
</div>
25+
</section>
26+
27+
<script src="js/zepto.min.js"></script>
28+
<script src="js/cube.js"></script>
29+
</body>
30+
</html>

‎10期JS正式课/正式课第九周/20161112/hyBride.png‎

78.7 KB
Loading

‎10期JS正式课/正式课第九周/20161112/img/zf_cube1.png‎

21.6 KB
Loading

‎10期JS正式课/正式课第九周/20161112/img/zf_cube2.png‎

9 KB
Loading

0 commit comments

Comments
 (0)