zoukankan      html  css  js  c++  java
  • javascript图片库威力增强版

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="layout.css" media="screen"/>
    </head>

    <body onload="countBodyChildren()">
    <h1>Snapshots</h1>
    <ul>
    <li><a href="Blue hills.jpg" onclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
    <li><a href="Sunset.jpg" onclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
    <li><a href="Water lilies.jpg" onclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
    <li><a href="Winter.jpg" onclick="showPic(this);return false;" title="a white world">雪林</a></li>
    </ul>
    <img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
    <p id="description">Choose an image</p>
    <script type="text/javascript" src="showPic.js"></script>
    </body>
    </html>

    showPic.js

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

    layout.css

    @charset "utf-8";
    /* CSS Document */

    body{
        font-family:Arial, Helvetica, sans-serif;
        color:#333;
        font-family:"新宋体";
        background-color:#ccc;
    }
    h1{
        color:#333;
        background-color:transparent;
    }
    a{
        color:#c60;
        background-color:transparent;
        font-weight:bold;
        text-decoration:none;
    }
    ul{
        padding:0;
    }
    li{
        float:left;
        padding:1em;
        list-style:none;
    }
    img{
        display:block;
        clear:both;
    }

  • 相关阅读:
    括号序列
    秘密信息
    大奖赛
    订单
    摆花
    利用spring自己实现观察者模式
    Spring操作mongo排序,限制查询记录数
    Hbse的读写过程
    使用aop记录数据库操作的执行时间
    分享一个关于jackson的Json工具类
  • 原文地址:https://www.cnblogs.com/daochong/p/4843123.html
Copyright © 2011-2022 走看看