Skip to content

Commit 6f88ef8

Browse files
amydevyaamydevya
committed
new
1 parent 746230c commit 6f88ef8

27 files changed

Lines changed: 1469 additions & 0 deletions

‎10期JS正式课/正式课周末第六周/第二天/1.客户端使用拖拽.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
html,body{
8+
overflow: hidden;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
div{
15+
position: absolute;
16+
width: 150px;
17+
height:150px;
18+
background: red;
19+
top:0;
20+
}
21+
.div1{
22+
left:0;
23+
background: lightgreen;
24+
}
25+
.div2{
26+
left:200px;
27+
background: lightpink;
28+
}
29+
.div3{
30+
left:400px;
31+
background: lightblue;
32+
}
33+
.div4{
34+
left:600px;
35+
background:lightgoldenrodyellow;
36+
}
37+
div img{
38+
width: 100%;
39+
height: 100%;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<div class="div1"><img src="img/1.png" alt=""></div>
45+
<div class="div2"><img src="img/2.png" alt=""></div>
46+
<div class="div3"><img src="img/3.png" alt=""></div>
47+
<div class="div4"><img src="img/4.png" alt=""></div>
48+
<script src="js/event.js"></script>
49+
<script src="js/effect.js"></script>
50+
<script src="js/Drag.js"></script>
51+
<script>
52+
var aDiv=document.getElementsByTagName('div');
53+
for(var i=0; i<aDiv.length; i++){
54+
var obj=new Drag(aDiv[i]);
55+
//需求：索引为1的元素，可以进行边界限制的拖拽；
56+
if(i==1){
57+
//obj.creaseIndex();
58+
obj.range({left:100,top:0,right:500,bottom:500})
59+
}
60+
if(i==2){
61+
obj.border();
62+
}
63+
if(i==3){
64+
obj.jump();
65+
}
66+
}
67+
</script>
68+
</body>
69+
</html>

‎10期JS正式课/正式课周末第六周/第二天/2.照片墙.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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+
ul{
13+
width: 480px;
14+
height: 640px;
15+
padding:5px;
16+
margin:10px auto;
17+
background: lightgray;
18+
/*overflow: hidden;*/
19+
}
20+
ul li{
21+
width: 150px;
22+
height: 150px;
23+
float: left;
24+
background: lightblue;
25+
margin:5px;
26+
}
27+
ul li img{
28+
width: 100%;
29+
height: 100%;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<ul>
35+
<li><img src="img/1.png" alt=""></li>
36+
<li><img src="img/2.png" alt=""></li>
37+
<li><img src="img/3.png" alt=""></li>
38+
<li><img src="img/4.png" alt=""></li>
39+
<li><img src="img/5.png" alt=""></li>
40+
<li><img src="img/6.png" alt=""></li>
41+
<li><img src="img/7.png" alt=""></li>
42+
<li><img src="img/8.png" alt=""></li>
43+
<li><img src="img/9.png" alt=""></li>
44+
<li><img src="img/10.png" alt=""></li>
45+
<li><img src="img/11.png" alt=""></li>
46+
<li><img src="img/12.png" alt=""></li>
47+
</ul>
48+
<script src="js/event.js"></script>
49+
<script src="js/utils.js"></script>
50+
<script src="js/move.js"></script>
51+
<script src="js/Drag.js"></script>
52+
<script>
53+
var aLi=document.getElementsByTagName('li');
54+
var zIndex=0;
55+
//1.布局转换操作：把浮动布局转为定位布局
56+
for(var i=aLi.length-1; i>=0; i--){
57+
var oLi=aLi[i];
58+
oLi.style.left=(oLi.l=oLi.offsetLeft)+'px';
59+
oLi.style.top=(oLi.t=oLi.offsetTop)+'px';
60+
oLi.style.position='absolute';
61+
oLi.style.margin=0;
62+
new Drag(oLi).on('selfDown',creaseIndex).on('selfMove',hited).on('selfUp',changePos);
63+
}
64+
//2.按下哪个元素，让哪个元素的层级最高
65+
function creaseIndex(){
66+
this.ele.style.zIndex=++zIndex;
67+
}
68+
//3.进行碰撞检测的辅助函数；
69+
function isHited(l,r){//检测任意两个元素是否发生碰撞
70+
if(l.offsetLeft+ l.offsetWidth< r.offsetLeft|| l.offsetTop+ l.offsetHeight< r.offsetTop|| l.offsetLeft> r.offsetLeft+ r.offsetWidth|| l.offsetTop> r.offsetTop+ r.offsetHeight){
71+
return false;
72+
}else{
73+
return true;
74+
}
75+
}
76+
//4.把发生碰撞的元素，背景颜色都变红；
77+
function hited(){//拿当前元素跟aLi中每个元素进行碰撞检测；碰到哪个li元素，就让哪个li元素变红
78+
this.aHited=[];
79+
for(var i=0; i<aLi.length; i++){
80+
var oLi=aLi[i];
81+
if(this.ele===oLi) continue;
82+
if(isHited(this.ele,oLi)){//能走true，说明碰着了
83+
oLi.style.background='red';
84+
this.aHited.push(oLi);
85+
}else{
86+
oLi.style.background='';
87+
}
88+
}
89+
}
90+
//5.让重叠最多的元素，跟当前元素交换位置；
91+
function changePos(){
92+
var aHited=this.aHited;
93+
//拿当前这个元素，跟aHited这个数组中每个元素，进行求值（求的是斜边的值）
94+
if(aHited && aHited.length){
95+
for(var i=0; i<aHited.length; i++){
96+
var oLi=aHited[i];
97+
oLi.distance=Math.pow(this.ele.offsetTop-oLi.offsetTop,2)+Math.pow(this.ele.offsetLeft-oLi.offsetLeft,2);
98+
oLi.style.background='';
99+
}
100+
aHited.sort(function(a,b){
101+
return a.distance- b.distance;
102+
});
103+
var shortest=aHited[0];//找到的距离当前元素最短的元素；
104+
shortest.style.background='purple';
105+
this.ele.style.background='purple';
106+
//让当前元素跟距离最短的元素交换位置；
107+
animate(this.ele,{left:shortest.l,top:shortest.t},{duration:500,effect:3});
108+
animate(shortest,{left:this.ele.l,top:this.ele.t},{duration:500,effect:3});
109+
var l=this.ele.l,t=this.ele.t;
110+
this.ele.l=shortest.l,this.ele.t=shortest.t;
111+
shortest.l=l,shortest.t=t;
112+
}else{
113+
animate(this.ele,{left:this.ele.l,top:this.ele.t},{duration:500,effect:3})
114+
}
115+
}
116+
</script>
117+
</body>
118+
</html>
119+
120+
121+
122+
123+
124+
125+

‎10期JS正式课/正式课周末第六周/第二天/3.滚轮封装.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
div{
8+
width: 200px;
9+
height: 200px;
10+
background: red;
11+
}
12+
</style>
13+
</head>
14+
<body style="height: 2000px">
15+
<div id="div"></div>
16+
<script src="js/wheel.js"></script>
17+
<script>
18+
var oDiv=document.getElementById('div');
19+
addWheel(oDiv,function(bOk){
20+
if(bOk){
21+
this.style.height=oDiv.offsetHeight+10+'px';
22+
}else{
23+
this.style.height=oDiv.offsetHeight-10+'px';
24+
}
25+
})
26+
/*function addWheel(ele,fn){
27+
//2.鼠标滚轮方向的判断：向下true，向上false； 3.回调函数：根据鼠标滚轮方向可以做不同的事情；
28+
function wheel(e){
29+
e=e||window.event;
30+
var bOk=null;
31+
//console.log(e.wheelDelta)//IE和chrome：down -120,up 120
32+
//alert(e.detail)//firefox:down 3，up -3;
33+
if(e.wheelDelta){//IE和chrome
34+
bOk= e.wheelDelta<0?true:false;
35+
}else{//firefox
36+
bOk= e.detail>0?true:false;
37+
}
38+
e.preventDefault? e.preventDefault(): e.returnValue=false;
39+
fn&&fn.call(ele,bOk);
40+
}
41+
//1.针对鼠标滚轮事件的兼容处理；
42+
if(window.navigator.userAgent.toLowerCase().indexOf('firefox')!==-1){
43+
oDiv.addEventListener('DOMMouseScroll',wheel,false);
44+
}else{
45+
oDiv.onmousewheel=wheel;
46+
}
47+
}*/
48+
//onmousewheel:IE和chrome
49+
/*oDiv.onmousewheel=function(){
50+
console.log(1);
51+
};*/
52+
//DOMMouseScroll:只针对火狐，并且，必须DOM2级事件来绑定
53+
/*oDiv.addEventListener('DOMMouseScroll',function(){
54+
console.log(1);
55+
})*/
56+
</script>
57+
</body>
58+
</html>
59+
60+
61+
62+
63+
64+
65+
66+

‎10期JS正式课/正式课周末第六周/第二天/4.乐视整屏切换.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
html,body{
8+
width: 100%;
9+
height: 100%;
10+
overflow: hidden;
11+
}
12+
*{
13+
margin:0;
14+
padding:0;
15+
list-style: none;
16+
}
17+
.wrap{
18+
width: 100%;
19+
height: 100%;
20+
position: absolute;
21+
left:0;
22+
top:0;
23+
/*overflow: hidden;*/
24+
}
25+
.wrap div{
26+
width: 100%;
27+
height: 100%;
28+
font-size: 100px;
29+
text-align: center;
30+
color: white;
31+
}
32+
.div1{
33+
background: darkblue;
34+
}
35+
.div2{
36+
background: darkcyan;
37+
}
38+
.div3{
39+
background: darkmagenta;
40+
}
41+
.div4{
42+
background: darkorange;
43+
}
44+
.div5{
45+
background: darksalmon;
46+
}
47+
ul{
48+
position: fixed;
49+
right:30px;
50+
top:50%;
51+
margin-top:-85px;
52+
53+
}
54+
ul li{
55+
width: 30px;
56+
height: 30px;
57+
border: 5px solid lightblue;
58+
border-radius: 50%;
59+
margin-bottom: 5px;
60+
}
61+
ul li.on{
62+
background: lightblue;
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<div id="wrap" class="wrap">
68+
<div class="div1">page1</div>
69+
<div class="div2">page2</div>
70+
<div class="div3">page3</div>
71+
<div class="div4">page4</div>
72+
<div class="div5">page5</div>
73+
<ul>
74+
<li class="on"></li>
75+
<li></li>
76+
<li></li>
77+
<li></li>
78+
<li></li>
79+
</ul>
80+
</div>
81+
<script src="js/wheel.js"></script>
82+
<script src="js/utils.js"></script>
83+
<script src="js/move.js"></script>
84+
<script>
85+
var oWrap=document.getElementById('wrap');
86+
var aDiv=oWrap.getElementsByTagName('div');
87+
var aLi=oWrap.getElementsByTagName('li');
88+
var n=0;
89+
var isWheel=true;
90+
addWheel(oWrap,function(bOk){
91+
if(isWheel){
92+
if(bOk){
93+
if(n>=aDiv.length-1){
94+
alert('到底了')
95+
return;
96+
}
97+
n++;
98+
}else{
99+
if(n<=0){
100+
alert('到顶了')
101+
return;
102+
}
103+
n--;
104+
}
105+
isWheel=false;
106+
setTimeout(function(){
107+
isWheel=true;
108+
},600);
109+
}
110+
changePage();
111+
});
112+
function changePage(){
113+
animate(oWrap,{top:-n*utils.win('clientHeight')},{duration:400})
114+
for(var i=0; i<aLi.length; i++){
115+
aLi[i].className='';
116+
}
117+
aLi[n].className='on';
118+
}
119+
</script>
120+
</body>
121+
</html>
122+
123+
124+
125+
126+
127+
128+
129+

0 commit comments

Comments
 (0)