Skip to content

Commit 1b9473a

Browse files
amydevyaamydevya
committed
new
1 parent 9759079 commit 1b9473a

24 files changed

Lines changed: 1752 additions & 0 deletions

‎10期JS正式课/正式课周末第四周/第一天/1.设定固定步长的运动.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
position: absolute;
9+
left:0;
10+
top:0;
11+
width: 200px;
12+
height: 200px;
13+
background: red;
14+
}
15+
#target{
16+
width: 1px;
17+
height: 300px;
18+
position: absolute;
19+
left:1000px;
20+
top:0;
21+
background: #000;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div id="div"></div>
27+
<div id="target"></div>
28+
<script>
29+
var oDiv=document.getElementById('div');
30+
//思路分析：固定步长 step=10； target=1000； 定时器
31+
var target=1000;
32+
var step=10;
33+
clearInterval(timer);
34+
var timer=setInterval(function(){
35+
//每次求出最新的位置，在最新的位置上累加step；重新设置新位置
36+
var curLeft=oDiv.offsetLeft;
37+
if(curLeft+step>=target){
38+
oDiv.style.left=target+'px';
39+
clearInterval(timer);
40+
return;
41+
}
42+
curLeft+=step;
43+
oDiv.style.left=curLeft+'px';
44+
},30)
45+
</script>
46+
</body>
47+
</html>

‎10期JS正式课/正式课周末第四周/第一天/2.计算步长的运动.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
position: absolute;
9+
left:0;
10+
top:0;
11+
width: 200px;
12+
height: 200px;
13+
background: red;
14+
}
15+
#target{
16+
width: 1px;
17+
height: 300px;
18+
position: absolute;
19+
left:1000px;
20+
top:0;
21+
background: #000;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div id="div"></div>
27+
<div id="target"></div>
28+
<script>
29+
var oDiv=document.getElementById('div');
30+
//思路分析：target duration interval 求出 step;
31+
var target=1000;
32+
var duration=1000;
33+
var interval=10;
34+
var step=target/duration*interval;
35+
clearInterval(timer);
36+
var timer=setInterval(function(){
37+
var curLeft=oDiv.offsetLeft;
38+
if(curLeft+step>=target){
39+
oDiv.style.left=target+'px';
40+
clearInterval(timer);
41+
return;
42+
}
43+
curLeft+=step;
44+
oDiv.style.left=curLeft+'px';
45+
},interval)
46+
</script>
47+
</body>
48+
</html>

‎10期JS正式课/正式课周末第四周/第一天/3.递归实现左右运动.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
input{
8+
height:40px;
9+
width: 150px;
10+
}
11+
div{
12+
position: absolute;
13+
left:500px;
14+
top:60px;
15+
width: 200px;
16+
height: 200px;
17+
background: red;
18+
}
19+
#target{
20+
width: 1px;
21+
height: 300px;
22+
position: absolute;
23+
left:1000px;
24+
top:0;
25+
background: #000;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<input type="button" value="左按钮">
31+
<input type="button" value="右按钮">
32+
<div id="div"></div>
33+
<script>
34+
var oDiv=document.getElementById('div');
35+
var oBtnLeft=document.getElementsByTagName('input')[0];
36+
var oBtnRight=document.getElementsByTagName('input')[1];
37+
oBtnRight.onclick=function(){
38+
move(1200);//可以通过目标值跟现在位置的比较，得出运动的方向
39+
};
40+
oBtnLeft.onclick=function(){
41+
move(0)
42+
};
43+
function move(target){
44+
_move();
45+
function _move(){
46+
var curLeft=oDiv.offsetLeft;
47+
if(curLeft<target){//right
48+
if(curLeft+10>=target){
49+
oDiv.style.left=target+'px';
50+
return;
51+
}
52+
curLeft+=10;
53+
}else{//left
54+
if(curLeft-10<=target){
55+
oDiv.style.left=target+'px';
56+
return;
57+
}
58+
curLeft-=10;
59+
}
60+
oDiv.style.left=curLeft+'px';
61+
clearTimeout(oDiv.timer);
62+
oDiv.timer=setTimeout(_move,10)
63+
}
64+
}
65+
</script>
66+
</body>
67+
</html>

‎10期JS正式课/正式课周末第四周/第一天/4.一个物体的多运动.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
position: absolute;
9+
left:200px;
10+
top:100px;
11+
width: 200px;
12+
height: 200px;
13+
background: red;
14+
}
15+
#target{
16+
width: 1px;
17+
height: 300px;
18+
position: absolute;
19+
left:1000px;
20+
top:0;
21+
background: #000;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div id="div"></div>
27+
<script src="js/utils.js"></script>
28+
<script src="js/move3.js"></script>
29+
<script>
30+
/*//t:time走了多久 b:begin起始位置 c:change还要走的距离 d：duration走的总时间
31+
function Linear(t,b,c,d){
32+
return b+c/d*t;
33+
}
34+
var oDiv=document.getElementById('div');
35+
//思路分析：targetL,targetT; beginL,beginT; changeL,changeT; duration; time;
36+
var targetL=1200,targetT=500;//{left:xxx,top:xxx}
37+
var beginL=oDiv.offsetLeft,beginT=oDiv.offsetTop;
38+
var changeL=targetL-beginL,changeT=targetT-beginT;
39+
var duration=1000;
40+
var time=null;
41+
//累加时间，根据公式求出最新的位置，并且，设置最新的位置； 停止条件的判断--时间
42+
clearInterval(timer);
43+
var timer=setInterval(function(){
44+
if(time>=duration){
45+
utils.css(oDiv,{
46+
left:targetL,
47+
top:targetT,
48+
});
49+
clearInterval(timer);
50+
return;
51+
}
52+
time+=10;
53+
var curL=Linear(time,beginL,changeL,duration);
54+
var curT=Linear(time,beginT,changeT,duration);
55+
utils.css(oDiv,{
56+
left:curL,
57+
top:curT
58+
})
59+
},10)
60+
*/
61+
//使用运动库
62+
var oDiv=document.getElementById('div');
63+
animate(oDiv,{
64+
left:1400,
65+
top:600
66+
},{
67+
duration:500,
68+
callback:function(){
69+
this.style.background='blue';
70+
},
71+
effect:['Bounce','easeInOut']
72+
})
73+
/*animate(oDiv,{
74+
left:1200,
75+
top:500,
76+
},{
77+
effect:['Bounce','easeOut'],
78+
callback:function(){
79+
this.style.background='green';
80+
}
81+
})*/
82+
83+
</script>
84+
</body>
85+
</html>

‎10期JS正式课/正式课周末第四周/第一天/5.左右切换的轮播图.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
list-style: none;
11+
}
12+
.box{
13+
width: 1000px;
14+
height: 300px;
15+
margin:50px auto;
16+
position: relative;
17+
overflow: hidden;
18+
background: url("img/default.gif") no-repeat center #e1e1e1;
19+
}
20+
.box .boxInner{
21+
position: absolute;
22+
left:0;
23+
top:0;
24+
width:4000px;
25+
height: 100%;
26+
clear:both;
27+
}
28+
.box .boxInner img{
29+
display: block;
30+
width: 1000px;
31+
height:100%;
32+
float:left;
33+
}
34+
.box ul{
35+
position: absolute;
36+
bottom:20px;
37+
right:20px;
38+
}
39+
.box ul li{
40+
width: 20px;
41+
height:20px;
42+
float: left;
43+
background: #aaa;
44+
border-radius: 50%;
45+
margin-left: 10px;
46+
cursor: pointer;
47+
48+
}
49+
.box ul li.on{
50+
background: blue;
51+
}
52+
.box a{
53+
width: 30px;
54+
height: 45px;
55+
background-image: url("img/pre.png");
56+
background-repeat: no-repeat;
57+
position: absolute;
58+
top:127.5px;
59+
opacity: 0.5;
60+
filter:'alpha(opacity:50)';
61+
display: none;
62+
}
63+
.box a:hover{
64+
opacity: 1;
65+
filter:'alpha(opacity:100)'
66+
}
67+
.box a.left{
68+
background-position: 0 0;
69+
left:30px;
70+
}
71+
.box a.right{
72+
background-position: -52px 0;
73+
right:30px;
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div id="box" class="box">
79+
<div class="boxInner">
80+
<!--<img src="img/banner1.jpg" alt="">
81+
<img src="img/banner2.jpg" alt="">
82+
<img src="img/banner3.jpg" alt="">
83+
<img src="img/banner4.jpg" alt="">-->
84+
</div>
85+
<ul>
86+
<!--<li class="on"></li>
87+
<li></li>
88+
<li></li>
89+
<li></li>-->
90+
</ul>
91+
<a href="javascript:;" class="left"></a>
92+
<a href="javascript:;" class="right"></a>
93+
</div>
94+
<script src="js/utils.js"></script>
95+
<script src="js/move3.js"></script>
96+
<script src="js/Banner1.js"></script>
97+
<script>
98+
var tab1=new Banner({
99+
id:'box',
100+
url:'json/data2.txt',
101+
interval:1500,
102+
effect:2
103+
});
104+
</script>
105+
</body>
106+
</html>

‎10期JS正式课/正式课周末第四周/第一天/img/banner1.jpg‎

192 KB
Loading

‎10期JS正式课/正式课周末第四周/第一天/img/banner2.jpg‎

216 KB
Loading

‎10期JS正式课/正式课周末第四周/第一天/img/banner3.jpg‎

194 KB
Loading

‎10期JS正式课/正式课周末第四周/第一天/img/banner4.jpg‎

60.7 KB
Loading

‎10期JS正式课/正式课周末第四周/第一天/img/default.gif‎

2.48 KB
Loading

0 commit comments

Comments
 (0)