JS学习笔记-构造一个画廊

作者: brafei | 来源:发表于2019-05-29 19:23 被阅读0次

JS学习笔记-构造一个画廊
javascript 笔记03（创建对象/原型模式/js 继承/
【前端学习笔记】JS构造函数简要
JS 学习笔记 | 构造函数和原型
markdown试用测试并上传一部分课程链接
进阶篇：JS数组操作 (7-2)
25 进阶：JS里的数组
js学习笔记
校本化HTTP-原生js
JavaScript-19.JS中产生的对象以及批量产生对象

主函数main.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>Image Gallery</title>
</head>
<body>
    <!-- 测试onclick函数 -->
    <!-- <a href="http://www.baidu.com" onclick="return false">click me</a> -->
    <h1>Snapshots</h1>
    <ul>
        <li><a href="images/Fireworks.jpg" onclick="showPic(this); return false;">Fireworks</a> </li>
        <li><a href="images/Coffee.jpg" onclick="showPic(this); return false;">Coffee</a></li>
        <li><a href="images/Rose.jpg" onclick="showPic(this); return false;">Rose</a></li>
        <li><a href="images/Big Ben.jpg" onclick="showPic(this); return false;">Big Ben</a></li>
    </ul>

    <img id="placeholder" src="images/placeholder.jpg" alt="my imge Gallery">
    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

JS代码showPic.js代码

function showPic(whichpic){
    var sSource = whichpic.getAttribute("href");
    var oPlaceholder = document.getElementById("placeholder");
    oPlaceholder.setAttribute("src", sSource)
}

说下对onclick函数的理解，这个函数的返回值默认为 true，因此在这里加入return false；用以解决页面跳转

学习使用childNode方法

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen">
</head>
<body>
    <!-- 测试onclick函数 -->
    <!-- <a href="http://www.baidu.com" onclick="return false">click me</a> -->
    <h1>Snapshots</h1>
    <ul>
        <li><a href="images/Fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a> </li>
        <li><a href="images/Coffee.jpg" title="A cup of black Coffee" onclick="showPic(this); return false;">Coffee</a></li>
        <li><a href="images/Rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a></li>
        <li><a href="images/Big Ben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a></li>
    </ul>

    <img id="placeholder" src="images/placeholder.jpg" alt="my imge Gallery">
    <p id="description" class="lable" title="images"> Choose an image</p>
    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

JS代码部分

function showPic(whichpic){
    var sSource = whichpic.getAttribute("href");
    var sText = whichpic.getAttribute("title");
    var oDescription = document.getElementById("description");
    var oPlaceholder = document.getElementById("placeholder");
    oPlaceholder.setAttribute("src", sSource);
    oDescription.firstChild.nodeValue = sText;
}

CSS代码部分

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

h1{
    color: #333;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

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

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

p{
    float: left;
}

#placeholder{
    float: left;
}