划重點拉！ 先來解釋一下子標題
這個所謂的美女相冊呢 並不是和你們想的一樣齷齪
當然了 好像看起來也很齷齪 但是很多的版面都能用到這個功能的
然后在此處 我要為我的my$函數來進行一個詮釋 就是為了多次使用getElementById帶來的麻煩封裝成了一個函數
我來簡單舉個例子：
在一個網頁里 這上面有三個圖 如果你點擊任意一個 下邊的空白處就會展示出那個圖的放大版本 話不多說 上圖
很多很齷齪的網站就是這種結構 看圖片哦 很多人應該看過把哈哈哈哈哈
好了好了 我要說這個具體怎么寫 怎么實現的了
我要再說一下 這個呢為什么沒放美女圖片呢
因為當時這個我是在教室里碼出來的哈哈哈哈 周圍都是人不好意思
~~~~stop
我直接把html和css 代碼粘上 不去講了因為我主要想總結一下 關於js的部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #caca { margin: 0 auto; overflow: hidden; } * { margin: 0; padding: 0; } #caca img { width: 200px; height: 200px; vertical-align: middle; } #caca ul { margin: 0 auto; width: 600px; height: 200px; } #caca li { float: left; } li { list-style-type: none; } #caca ul { width: 600px; } #display { width: 600px; height: 600px; margin: 0 auto; } #display img { width: 600px; height: 600px; } </style> </head> <body> <div id="caca" > <ul> <li><a href="11.jpg"><img src="11.jpg" alt=""></a></li> //這里可是有講究的哦 如果不把a的href設置成和圖片一樣 那么你操作起來會很麻煩 可能是我學的還不夠厲害 <li><a href="1.jpg"><img src="1.jpg" alt=""></a></li> //我就以我的理解告訴你們 不要笑話我哦哈哈 在下面我先給你們看我如果不設置a的href是怎么實現的 <li><a href="pic1.png"><img src="pic1.png" alt=""></a></li> </ul> </div> <div id="display"> <img id="test" src="" alt=""> </div>
</body>
</html>
其實這個難度不高 但是有個點我感覺很好
第一種方法： a中不設置href 設置a的href為# ：
1 var as = my$("caca").getElementsByTagName("a"); //首先獲取三個圖片的a標簽 因為要分別為他們設置點擊事件 2 for (var i = 0;i < as.length;i++){ //利用for循環為每個a注冊點擊事件 3 as[i].onclick = function () { 4 var temp = this.getElementsByTagName("img"); //由於沒有設置a的href 我們要獲取a里面img的src 但是獲取img用的是獲取集合的方式 我們明明知道它只有一個但是就是要進行循環 5 for (var i = 0;i < temp.length;i++){//然后把她的src 賦給 下邊的顯示框的圖片的src 整個程序看起來就很復雜 很不簡潔 這個方法就放棄掉! 6 my$("test").src = temp[i].src; 7 } 8 10 } 11 }
第二種方法： a種設置href 等於 a種img的src
var as = my$("caca").getElementsByTagName("a"); //首先獲取三個圖片的a標簽 為他們設置點擊事件
for (var i = 0;i < as.length;i++){ 利用for循環為每個a注冊點擊事件
as[i].onclick = function () {
my$("test").src = this.href; // 由於設置了 href 就不需要再獲取a種的img了 直接賦值就很方便
return false; //這一行是這個方法的靈魂所在
}
}
划重點！！！！
一 ！如果我們沒有為一個a標簽注冊事件 那么它的默認事件就是跳轉到href種的網址
如果我們為a標簽注冊了一個處理函數 （事件），那么他會先執行處理函數 再執行默認的事件
但是呢如果我們不想再讓他繼續進行默認的事件 我們就可以利用 return false 來阻止默認事件的發生！
我剛剛又嘗試了第三種寫法 也是可以實現的 第三種好像更方便 我貼出來給大家看 用的是children來寫的 我不是很懂原理 但是之前寫過會這么寫
1 var as = my$("caca").getElementsByTagName("a"); 2 for (var i = 0;i < as.length;i++){ 3 as[i].onclick = function () { 4 my$("test").src = this.children[0].src; 5 } 6 }
return document.getElementById(id);
}