主頁 >
企業開發 > JavaScript連載33-點擊查看大圖效果以及閉包初步
JavaScript連載33-點擊查看大圖效果以及閉包初步
2020-09-20 04:50:18 企業開發
<script>
window.onload=function (ev) {
//1.獲取標簽
// var li01 = document.getElementById("li01");
// var li02 = document.getElementById("li02");
// var li03 = document.getElementById("li03");
// var li04 = document.getElementById("li04");
// var li05 = document.getElementById("li05");
// var box = document.getElementById("box");
//上面的陳述句我們使用函式來封裝起來
var li01 = $("li01");
var li02 = $("li02");
var li03 = $("li03");
var li04 = $("li04");
var li05 = $("li05");
var box = $("box");
//2.監聽滑鼠事件
// li01.onmouseover = function (ev1) {
// box.style.background ='url("img/img_01.png") no-repeat';
// };
// li02.onmouseover = function (ev2) {
// box.style.background = 'url("img/img_02.png") no-repeat';
// };
// li03.onmouseover = function (ev3) {
// box.style.background = 'url("img/img_03.png") no-repeat';
// };
// li04.onmouseover = function (ev4) {
// box.style.background = 'url("img/img_04.png") no-repeat';
// };
// li05.onmouseover = function (ev5) {
// box.style.background = 'url("img/img_05.png") no-repeat';
// };
li01.onmouseover = function (ev1) {
changeImg("img/img_01.png")
};
li02.onmouseover = function (ev1) {
changeImg("img/img_02.png")
};
li03.onmouseover = function (ev1) {
changeImg("img/img_03.png")
};
li04.onmouseover = function (ev1) {
changeImg("img/img_04.png")
};
li05.onmouseover = function (ev1) {
changeImg("img/img_05.png")
};
//這樣我們定義了滑鼠的顯示情況就可以來展示大圖了
//接下來我們封裝函式，有大批量的重復代碼
}
/**
* 根據id獲取標簽
* @param [string} id
*/
function $(id) { //$
return typeof id === 'string'? document.getElementById(id):null;
}
/**
*
* @param {string}tag
* @param {string}imgSrc
*/
function changeImg(imgSrc) {
box.style.background = 'url("'+ imgSrc + '") no-repeat';
}
</script>
</body>
</html>
二、如果使用閉包也可達到上面的效果
window.onload = function (ev6) {
//1.獲取需要的標簽
var box = document.getElementById("box");
var allList = box.getElementsByTagName("li");
//2.監聽滑鼠進入li標簽
for(var i=0;i<allList.length;i++){
//2.1取出單獨的li標簽
var sLi = allList[i];
// sLi.setAttribute("index",i+1);//復習設定屬性的方法setAttribute
// sLi.onmouseover = function (ev7) {
// console.log(this);
// console.log(this.getAttribute("index"));//獲取這個li的index值
// }
//上面五行等價去下面,使用了閉包的知識，下次連載我們再講
(function (tag) {
sLi.onmouseover = function (ev9) {//復習onmouseover就是滑鼠滑過這個模塊之后要干的活兒
console.log(tag);
box.style.background = 'url("img/img_0'+ tag + '.png") no-repeat';
}
})(i+1)
}
}
三、原始碼：
- D33_1_SwitchIcon.html
- D32_2_CommonMouse.html
- D32_3_erweimaXianshi.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D33_1_SwitchIcon.html
https://github.com/ruigege66/JavaScript/blob/master/D32_2_CommonMouse.htmlhttps://github.com/ruigege66/JavaScript/blob/master/D32_3_erweimaXianshi.html- 博客園：
https://www.cnblogs.com/ruigege0000/
- CSDN：
https://blog.csdn.net/weixin_44630050?t=1
- 歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/85966.html
標籤：JavaScript
上一篇：webpack筆記-webpack初識與構建工具發展（一）
下一篇：Web基礎了解版06-Jsp-指令、標簽-九大隱式物件-四個域物件
