JavaScript_圖片庫

twilight0402發表於2017-02-04
JavaScript

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/54862407

事件處理函式:

1.onmouseover滑鼠進入
2.onmouseout滑鼠移出
3.onclick滑鼠點選
用法：

<a href=”src” onmouseover=”showPic(this); return false;” title=”0001” >0001</a>

表示當滑鼠進入時執行showPic函式，引數是本身這個物件。執行完所有函式後返回false，因為一般情況下，點選一個連結會開啟一個新的頁面。而當onmouseover返回false時，就會認為沒有被點選，所以不會開啟新的頁面。

childNodes 屬性

獲取一個元素的所有子元素，他是一個包含所有子元素的陣列。
elements.childNodes

nodeType屬性

獲取body節點的屬性型別：*body[0].nodeType*

節點型別 屬性值
元素節點 1
屬性節點 2
文字節點 3

nodeValue獲取屬性的內容

獲取p節點的內容：

    var p = document.getElementsByTagName("p");
    alert(p[0].firstChild.nodeValue);

內容是一個文字節點，他是p節點的一個子節點，所以直接用p.nodeValue並不可以獲取文字內容，而是用p.firstChild獲取他的子節點的內容。

firstChild/lastChild 第一個子節點/最後一個子節點

運用以上知識完成的一個小專案：
效果圖如下：
效果圖
原始碼如下：

<!--HTML部分-->

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="CSS/photos.css"/>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="http://i1.piimg.com/584041/a46e945e0fa0f2b4.jpg" onmouseover="showPic(this); return false;" title="0001" >0001</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" onmouseover="showPic(this); return false;" title="0002">0002</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/60be391e7c6a7f4f.jpg" onmouseover="showPic(this); return false;" title="0003">0003</a>
        </li>
        <li>
            <a href="http://i1.piimg.com/584041/9130f7450dab0a15.jpg" onmouseover="showPic(this); return false;" title="0004">0004</a>
        </li>
    </ul>
    <img id="placeholder" src="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" title="placeholder" wodth="400" height = 300/>
    <p id="description">Choose a image </p>

    <script type="text/javascript" src="JS/photos.js" ></script>
</body>
</html>
//JavaScript部分

function showPic(whichpic){
    var sourse = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",sourse);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = "This is image :"+text;
}
/*css部分*/

*{
    padding:0;
    margin:0;
}

body{
    font-family: "helvetica","Arial",serif;
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
}

h1{
    color:#333;
    background-color:transparent;
}

a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration:none;
}

li{
    list-style:none;
    display:inline-block;
    margin:1em;
    margin-top:2em;
}

img{
    display:block;
    clear:both;
}
p{
    margin-top:1em;
    font-size:18px;
    font--weight:bold;
}


相關文章