分析

Posted on

JS的切换案例分析

1
js什么的用文字说都太丧心病狂了，所以能用代码解决的事就不要揪着文字不放了！！！以下所有分析都在代码里，别说你看不见!!!

案例1 按钮点击切换div

代码

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background: cornflowerblue;
			font-size: 50px;
			text-align: center;
			line-height: 100px;
			display: none;
		}
		.show{
			display: block;
		}
		.select{
			background: darkorange;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			//根据TagName获取四个按钮
			var input = document.getElementsByTagName("input");
			//根据TagName获取四个div
			var div = document.getElementsByTagName("div");
			//最简单的写法
				//第1个按钮
				input[0].onclick = function(){
					//清空样式
					for (var i=0; i<input.length;i++) {
						input[i].className = "";
						div[i].className ="";
					}
					this.className = "select";
					div[0].className = "show";
				}
				//第2个按钮
				input[1].onclick = function(){
					//清空样式
					for (var i=0; i<input.length;i++) {
						input[i].className = "";
						div[i].className ="";
					}
					this.className = "select";
					div[1].className = "show";
				}
				//第3个按钮
				input[2].onclick = function(){
				//清空样式
					for (var i=0; i<input.length;i++) {
						input[i].className = "";
						div[i].className ="";
					}
					this.className = "select";
					div[2].className = "show";
				}
				//第4个按钮
				input[3].onclick = function(){
					//清空样式
					for (var i=0; i<input.length;i++) {
						input[i].className = "";
						div[i].className ="";
					}
					this.className = "select";
				 	div[3].className = "show";
				}
			//以上代码不一样的地方只有[]里的数字，所以可以采用for循环来简洁代码
				//写法1
				for(var i=0; i < input.length; i++){
					//给input标志一个数字，用于告诉div，input是第几个
				   input[i].index = i;
					input[i].onclick = function(){
 					//清空样式
						for (var i=0; i<input.length;i++) {
							input[i].className = "";
							div[i].className ="";
						}
						this.className = "select";
						div[this.index].className = "show";
					}
				}
			//写法2
				for(var i=0; i < input.length; i++){
					input[i].onclick = function(){
						for (var i=0; i<input.length;i++) {
							if (this == input[i]) {
							//判断this是哪个input
								input[i].className = "select";
								div[i].className = "show";
							} else{
								//清空样式
								input[i].className = "";
								div[i].className ="";
							}
						}
					}
				}
			//写法3 减少计算器的运算
			var before = 0;//用于记录当前选中的index值，并在下次点击事件变成上一个，然后清除它的样式，达到切换效果
			for(var i=0; i < input.length; i++){
				//给input标志一个数字，用于告诉div，input是第几个
				input[i].index = i;
				input[i].onclick = function(){
					input[before].className = "";//清除上一个选中的index值
					div[before].className = "";
					this.className = "select";
					div[this.index].className = "show";
					before = this.index;//记录当前选中的index值
				}
			}
		}
	</script>
</head>
<body>
	<input class="select" type="button" value="按钮1"/>
	<input type="button" value="按钮2"/>
	<input type="button" value="按钮3"/>
	<input type="button" value="按钮4"/>
	<div class="show">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

案例2 图片切换

代码

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			.warp{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.img{
				width: 100%;
				position: relative;
			}
			#show{
				width: 400%;
				position: relative;
				transition: 1s;
			}
			#show img{
				width: 12.5%;
				position: relative;
			}
			.warp #next{
				width: 0;
				height: 0;
				-webkit-box-sizing: border-box;
				border: 8px solid cornflowerblue;
				border-color: transparent  transparent transparent cornflowerblue; 
				position: absolute;  
				top: 0;
				right: 5%;
			}
			.warp #before{
				width: 0;
				height:0;
				-webkit-box-sizing: border-box;
				border: 8px solid cornflowerblue;
				border-color: transparent cornflowerblue transparent transparent; 
				position: absolute;  
				top: 0;
				right: 15%;
			}
			
		</style>
		<script type="text/javascript">
			window.onload =function (){
				//根据ID获取上一张的按钮
				var before = document.getElementById('before');
				//根据ID获取下一张的按钮
				var next = document.getElementById('next');
				//根据ID获取图片的父级div
				var s = document.getElementById('show');
				//根据TagName获取图片的集合
				var img = document.getElementsByTagName('img');
				//定义一个节点，确定图片当前的位置
				var index = 1;
				//下一张按钮的点击事件
				next.onclick = function (){
					if(index < img.length){
					//判断图片是否是最后一张
						//图片不是最后一张时，执行
						//定义num 计算left的数值，每张宽度是wrap的100%
						var num = -1 * index;
						//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）
						s.style.left = num*100 +"%";
						//移动结束，记录当前图片位置
						index ++;
					}else{
						//图片是最后一张时，执行
						//让图片回到第一张
						s.style.left = '0';
						//初始当前图片位置
						index = 1;
					}
				}
				//上一张按钮的点击事件
				before.onclick = function (){
					if(index != 0){//判断图片是否是第一张
						//图片不是第一张时，执行
						//定义num 计算left的数值，每张宽度是wrap的100%
						var num = -1 * index;
						//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）
						s.style.left = num*100 +"%";
						//移动结束，记录当前图片位置（注：位置需要的是上一张，所以是-1）
						index --;
					}else{
						//图片是第一张时，执行
						//让图片回到最后一张
						s.style.left = '-300%';
						//记录最后一张位置
						index = img.length;
					}
				}
				//每张图片的点击事件
				for (var i = 0; i < img.length;i++) {
				//遍历每张图片
					img[i].onclick = function (){
					//设置每张图片的点击事件
						if(index < img.length){
						//判断图片是否是最后一张
							//图片不是最后一张时，执行
							//定义num 计算left的数值，每张宽度是wrap的100%
							var num = -1 * index;
							//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）
							s.style.left = num*100 +"%";
							//移动结束，记录当前图片位置
							index ++;
						}else{
							//图片是最后一张时，执行
							//让图片回到第一张
							s.style.left = '0';
							//初始当前图片位置
							index = 1;
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="warp">
			<div class="img">
				<div id="show">
					<img src="image/bytedanceHD.jpg" alt="" /><img src="image/huawei_redpoint.jpg" alt="" /><img src="image/toutiaohaoHD.jpg" alt="" /><img src="image/UCexplorer.jpg" alt="" />
				</div>
			</div>
			<div id="before"></div>
			<div id="next"></div>
		</div>
	</body>
</html>

案例3 鼠标经过时切换

代码

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				position: relative;
			}
			.clear:after{
				content: '';
				display: block;
				clear: both;
				zoom: 1;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.wrap{
				width: 400px;
				height: 400px;
				border: 1px solid mediumaquamarine;
				position: absolute;
				left: 0;
				right: 0;
				margin: 100px auto;
				box-shadow: 1px 1px 3px aquamarine;
				border-radius: 3px;
			}
			#left{
				width: 150px;
				height: 100%;
			}
			#left div{
				width: 100%;
				height: 24.8%;
				line-height: 100px;
				text-align: center;
				border-bottom: 1px solid cadetblue;
				background: rgba(0,255,255,0.05);
				
			}
			#left div:nth-child(4){
				border: 0;
			}
			#scroll{
				width: 20px;
				height: 20px;
				background: url(img/arr.png);
				background-size: 100% 100%;
				position: absolute;
				top: 0px;
				left: 131px;
				z-index: 3;
				transition: 0.6s;
			}
			#right{
				width: 249px;
				height: 100%;
				border-left: 1px solid #eee;
				z-index: 3;
				background: white;
				box-shadow: -1px 0px 3px #ccc;
			}
			#right div{
				display: none;
			}
			#right div img{
				width: 100%;
			}
			#left .select{
				background: rgba(0,251,255,0.2);
			}
		</style>
		<script type="text/javascript">
			window.onload = function (){
				//1.获取左边四个邮箱类型
				//2.获取三角形
				//3.获取右边四块邮箱内容
				//4.设置四个邮箱类型的鼠标经过事件
				//5.经过时改变三角形位置
				//6.显示右边对应的邮箱内容
				
				var left = document.getElementById('left');
				var scroll = document.getElementById('scroll');//三角形
				var right = document.getElementById('right');
				var div = left.getElementsByTagName('div');
				//左边四个邮箱类型
				var div2 = right.getElementsByTagName('div');
				//右边四块邮箱内容
				//offsetHeight 获取标签的高度 offsetWidth 获取标签的宽度
				//左边单个邮箱类型的高度减三角形的高度，除以2     获得左边单个邮箱类型的垂直中间位置
				var _middle = (div[0].offsetHeight -scroll.offsetHeight)/2;
				//设置三角形的初始位置为左边单个邮箱类型的垂直中间位置
				scroll.style.top = _middle+"px";
				
				//遍历设置左边的所有项的鼠标经过事件
				for (var i=0; i < div.length ; i++) {
					div[i].index = i ;//定义左边单个邮箱类型的节点，告诉它，它自己的位置，以控制右边对应的邮箱内容显示
					div[i].onmouseenter = function(){
					//鼠标经过事件
						var sum = _middle + (100*this.index);//计算该邮箱类型的垂直中间位置
						scroll.style.top = sum+'px';
						//改变三角形位置
						for (var j=0; j < div.length ; j++) {//清除所有邮箱类型以及右边对应的邮箱内容的样式
							div[j].className = "";
							div2[j].style.display = "none";
						}
						//设置当前选中邮箱类型以及右边对应的邮箱内容的样式
						this.className = 'select';
						div2[this.index].style.display = "block";
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="wrap clear">
			<div id="left" class="fl">
				<div class="select">163</div>
				<div>126</div>
				<div>qq</div>
				<div>google</div>
			</div>
			<div id="scroll"></div>
			<div id="right" class="fr">
				<div style="display: block;"><img src="../image/toutiaohaoHD.jpg"/></div>
				<div ><img src="../image/huawei_redpoint.jpg"/></div>
				<div ><img src="../image/UCexplorer.jpg"/></div>
				<div ><img src="../image/bytedanceHD.jpg"/></div>
			</div>
		</div>
	</body>
</html>

小贴士偷偷告诉你

1
2
3
4
5
6
function
function:函数，一个方法，需要一个对象去调用
this：函数里的一个对象
给函数名加上()可以执行
默认调用的函数是window
谁调用函数,this就是谁