javascript - 常用基础动效

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/88782066

文章目录：
	for 循环
	——
	1.0、切换图片（for循环遍历）
	2.0、封装id进行 - 图片切换
	3.0、封装+排他思想（闭包）- 选项卡切换

for 循环 9*9乘法表：

for(var i = 1; i < 10; i++) {
	// 绘制三角形，列数要跟着行数走
	for(var j = 1; j <= i; j++){
		window.document.white("<span>" + j +"*"+ i +"="+ j * i + "</span>")
	}
	window.document.white("<br/>")
}

---

切换图片：

<script>
	var ul = document.getElementById("fj");
	var aList = document.getElementsByTagName("a");
	var des = document.getElementById("des");
	var big_img = document.getElementById("big_img");
	//绑定事件，for循环遍历
	for(var i = 0; i<aList.length; i++) {
		//切换不同的 a标签
		aList[i].onclick = function() {
			// this传值给 src,innerHTML
			big_img.src = this.href; 
			des.innerHTML = this.title;
			return false; //结束方法
		}
	}
</script>
<p id="dec">蒲公英</p>
<img src="img/img01.jpg" alt="蒲公英" id="big_img" />
<ul id="fj">
	<li>
		<a href="img/img01.jpg" title="蒲公英">
			<img src="img/img01.jpg" alt="蒲公英" id="" />
		</a>
	</li>
	<li>
		<a href="img/img01.jpg" title="蒲公英">
			<img src="img/img01.jpg" alt="蒲公英" id="" />
		</a>
	</li>
</ul>

封装id:

分析：
—— $(liID)：	调用 $() 方法，就相当于 var 了一个 document.getElementById("") ,传入一个id，拿到img标签
第二种方法则是用 for循环遍历

<script>
	//封装id
	window.onload = function() {
		// $ -表示函数的名称，id - 为传参，获取标签是根据id
		// 对应 var li01 = document.getElemenetById('li01'); 操作
		function $(id) {
			//1.0、做判断,如果id为字符串类型，则输出id
			return typeof id === "string" ? document.getElementById(id) : null;
		}
		// 2.0 改变背景图片
		/* 对应 
		li01.onmouseover = function() {
			box.style.background = 'url("img/img01.png") no-repeat center center';
		};*/
		function changeImage(liId,imgSrc) {
			$(liID).onmouseover = function() {
				$('box').style.background = imgSrc;
			};
		}
		//传入两个字符串的值
		changeImage('li01', 'url("img/img01.png") no-repeat center center');
		changeImage('li02', 'url("img/img02.png") no-repeat center center');
		changeImage('li03', 'url("img/img03.png") no-repeat center center');
		
		--------------------------------------------------------------------
		/* 第二种方法 */
		--------------------------------------------------------------------
		
		var box = document.getElementById('box');
		var aList = box.getElementsTagName('li');
		for (var i=0; i<aList.length; i++) {
			var sli = aList[i]; // 取到每个li，做监听
			sli.index = i+1; // 动态取到不同li的index（下标）值
			sli.onmouseover = function() {
				box.style.background = 'url("img/img0"+ this.index +".png") no-repeat center center'
			};
		}
	}
</script>
// 大的图片为box的背景图
<div id="box">
	<ul>
		<li id="li01">
			<img src="img/img01.png" alt="" />
		</li>
	</ul>
</div>

tab选项卡：

分析：
排他思想 — this：	在事件中，函数中的this就指向了数据源
排他思想 — 同步 与 异步	看两个示例

<script>
	var btns = document.querySelectorAll('button');
	//遍历，如果不处理，点击会一直弹出 i 的总个数（无论点哪个）
	for (var i=0; i<btns.length; i++) { // for循环是一个同步的，会一次性执行完循环体（三次 0，1，2）
		// 方法1 ：加入一个索引
		btns[i].index = i;
		btns[i].onclick = function() {
			alert("你点击了第" + this.index + "个按钮") // 点击哪个就会对应哪个索引
		};
		-----------------------------------------------------------------------
		// 方法2： 闭包
		(function (i) {
			btns[i].onclick = function() {
				alert("你点击了第" + i + "个按钮") 
			};
		})(i)
	}
</script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

• display 的none 和 block 相互切换并不会影响 性能，而dom操作的删除和插入则会；

<script>
//tab: 
window.onload = function() {
	//1.0、先获取到 头部 和 内容 的两个标签下的所有内容
	var allList = $('tab_header').getElementsByTagName('li'); //数组 - 0，1，2，3，4，5
	var allDom = $('tab_content').getElementsByClassName('dom'); //数组 - 0，1，2，3，4，5
	
	//2.0、遍历监听
	for(var i=0; i<allList.length; i++) { // 同步
		var li = allList[i];
		li.index = i;  // 索引，方便找到当前对应的 this 的 allDom 内容( allDom 则通过数组的形式拿到对应内容 ) 
	
		li.onmouseover = function() {
			//遍历，排他思想，清除掉除了当前 this 以外的样式
			for(var j=0; j<allList.length; j++) {
				allList[j].className = '';
				allDom.style.display = 'none';
			};
			this.className = "selected";
			allDom[this.index].style.display = "block";
		}
	}
}
//封装一个id， 直接$调用:
function $(id) {
	return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
//class 用中划线， id 用下划线
<div id="tab">
	// 头部
	<div id="tab_heder">
		<ul>
			<li class="selected">公告</li>
			<li>规则</li>
		</ul>
	</div>
	// 内容
	<div id="tab_content">
		<div class="dom" style="display: block">1111</div>
		<div class="dom" style="display: none">2222</div>
	</div>
</div>