• javascript图片库


    将图片发布到网上的办法很多,可以简单地把所有图片都放在一个网页中,但是会导致这个网页过于庞大。为每张图片分别创建一个网页的解决办法值得考虑,但是制作过程需要花费非常多的时间和精力。

    如果想要两全其美,那我有一种方法,利用JavaScript制作一个图片库,把整个图片库的浏览链接到图片库主页,用户点击某个链接时,那张图片才会且在本页面显示。

    html文件的编写

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

    <body>
    <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"/>
    <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);
    }

  • 相关阅读:
    markdown
    显示数学公式
    iOS----时间日期处理
    OC中文件读取类(NSFileHandle)介绍和常用使用方法
    深刻理解----修饰变量----关键字
    iOS----轻松掌握AFN网络顶级框架
    iOS
    iOS--多线程之线程间通讯
    iOS--多线程之NSOperation
    iOS--多线程之GCD
  • 原文地址:https://www.cnblogs.com/daochong/p/4827661.html
Copyright © 2020-2023  润新知