zoukankan      html  css  js  c++  java
  • 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);
    }

  • 相关阅读:
    activiti初学
    Python微信跳一跳外挂
    Linux下将Mongodb单机升级至副本集
    Linux安装Mongodb4.2
    Python3 acm基础输入输出
    Nginx安装图片模块出错,提示fatal error: curl/curl.h
    基于Redis的分布式锁两种实现方式
    Nginx常用模块安装命令
    Nginx安装Nginx-echo模块
    Nginx使用图片处理模块
  • 原文地址:https://www.cnblogs.com/daochong/p/4827661.html
Copyright © 2011-2022 走看看