zoukankan      html  css  js  c++  java
  • JS入门学习,写一个简单的图片库

    <!-- 新手刚开始学JS,每天坚持写点东西 

    坚持下去,希望能有所进步 。  加油~~ -->

    <!DOCTYPE html>                                            
    <html>
    <head>
    <title>创建一个图片库</title>
    <meta charset="gb2312" />
    <link rel="stylesheet" href="css/layout.css">
    </head>

    <body>

    <h1>创建一个图片库</h1>
    <ul>
    <li><a href="美图/1.JPG" title="这是一只狐狸" onclick="showPic(this); return false;">狐狸</a></li>
    <li><a href="美图/2.JPG" title="这是一个苹果" onclick="showPic(this);return false;">苹果</a></li>
    <li><a href="美图/3.JPG" title="这是一盘" onclick="showPic(this);return false;">水果</a></li>
    <li><a href="美图/4.JPG" title="这是一朵花" onclick="showPic(this);return false;">花朵</a></li>
    <li><a href="美图/5.JPG" title="这是杨岢" onclick="showPic(this);return false;">傻逼</a></li>
    </ul>
    <img id="pic_xianshi" src="" alt="图片将在这里显示" width="600" height="400">
    <p id="description">图片将在这里显示</p>

    <script src="js/showPic.js">

    </script>
    </body>

    </html>

    -------以下是javascript代码-----------

    window.onload = function{

      function showPic(whichpic){

        var source = whichpic.getAttribute("href");              //声明source,从函数中获取href

        var oDis = document.getElementsById("pic_xianshi");       //声明oDis, 它将代表 id为pic_xianshi这个元素

        oDis.setAttribute("src",source);                  //设置oDis里的属性和值 分别是 "src",  source是“href”所以不用加引号了

        //图片跟随有了,现在继续把文字接上

        var text = whichpic.getAttribute("title");              //声明 text,从函数中获取title

        var description = document.getElementById("description");     //声明description, 从文件获取ID为description的元素

        description.firstChild.nodeValue = text ;                //最终让description中第一个节点的值同步为text的信息

      }

    }

    没有进行太多布局和编排。自己再把思路整理一下吧~~ 

    看看跟着能不能实现简单的效果~~  ^_^  加油

  • 相关阅读:
    wcf技术博客
    MFC程序崩溃的友好处理
    DESCryptoServiceProvider 类
    AttributeUsage AttributeTargets
    Word 2007第n级编号不自动按照父级标题自动编号 的解决办法
    suo的作用
    "在唯一密钥属性“name”设置为“Application”时,无法添加类型为“add”的重复集合项"
    PMP考试中的成本管理英文缩写及其含义
    删除右键新建菜单中的多余项
    使用命令行启动服务
  • 原文地址:https://www.cnblogs.com/fuyinsheng/p/5007622.html
Copyright © 2011-2022 走看看