劃重點拉！ 先來解釋一下子標題 這個所謂的美女相冊呢 並不是和你們想的一樣齷齪 當然了 好像看起來也很齷齪 但是很多的版面都能用到這個功能的 我來簡單舉個例子： 在一個網頁里 這上面有三個圖 如果你點擊任意一個 下邊的空白處就會展示出那個圖的放大版本 話不多說 上圖 很多很齷齪的網站就是這種結構 看 ...
劃重點拉！ 先來解釋一下子標題
這個所謂的美女相冊呢 並不是和你們想的一樣齷齪
當然了 好像看起來也很齷齪 但是很多的版面都能用到這個功能的
然後在此處 我要為我的my$函數來進行一個詮釋 就是為了多次使用getElementById帶來的麻煩封裝成了一個函數
function my$(id) {
return document.getElementById(id);
}
我來簡單舉個例子：
在一個網頁里 這上面有三個圖 如果你點擊任意一個 下邊的空白處就會展示出那個圖的放大版本 話不多說 上圖
很多很齷齪的網站就是這種結構 看圖片哦 很多人應該看過把哈哈哈哈哈
好了好了 我要說這個具體怎麼寫 怎麼實現的了
我要再說一下 這個呢為什麼沒放美女圖片呢
因為當時這個我是在教室里碼出來的哈哈哈哈 周圍都是人不好意思
~~~~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 }
