"美女相冊"的 js 實現代碼

時間 2019-11-09

標籤相冊實現代碼欄目 JavaScript 简体版

原文原文鏈接

劃重點拉！先來解釋一會兒標題javascript

這個所謂的美女相冊呢並非和大家想的同樣齷齪
css

固然了好像看起來也很齷齪可是不少的版面都能用到這個功能的html

而後在此處我要爲個人my$函數來進行一個詮釋就是爲了屢次使用getElementById帶來的麻煩封裝成了一個函數java

function my$(id) {
return document.getElementById(id);
}

我來簡單舉個例子：函數

在一個網頁裏這上面有三個圖若是你點擊任意一個下邊的空白處就會展現出那個圖的放大版本話很少說上圖網站

不少很齷齪的網站就是這種結構看圖片哦不少人應該看過把哈哈哈哈哈this

好了好了我要說這個具體怎麼寫怎麼實現的了
spa

我要再說一下這個呢爲何沒放美女圖片呢 code

由於當時這個我是在教室裏碼出來的哈哈哈哈周圍都是人很差意思htm

~~~~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         }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。