会员注册关闭
最简单的网页图片相处库浏览页面代码
作者:
未知
来源:
网络收集
整理日期:
2021-05-05
功能描述:
点击链接,使链接图片出现在页面下方。成为简单的图片库浏览页面。
CSS代码:
JS文件代码:
获得更多 -> 编程技巧 -> JSP编程技巧
点击链接,使链接图片出现在页面下方。成为简单的图片库浏览页面。
html 代码复制内容到剪贴板
- //html代码
- <!docTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Image Gallery</title>
- <link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">
- </head>
- <body>
- <!-- 功能:点击链接,使链接图片出现在页面下方。成为简单的图片库浏览页面 -->
- <h1>Snapshots</h1>
- <ul id="imagegal">
- <li>
- <a href="Image/rose.jpg" onclick="showPic(this);return false" title="rose Image">rose Image</a></li>
- <li>
- <a href="Image/bird.jpg" onclick="showPic(this);return false" title="bird Image">bird Image</a>
- </li>
- <li><a href="Image/shanghai.jpg" onclick="showPic(this);return false" title="shanghai Image">shanghai Image</a>
- </li>
- <li><a href="Image/beautifulrose.jpg" onclick="showPic(this);return false" title="beautifulrose Image">beautifulrose Image</a>
- </li>
- <img id="placeholder" src="Image/gallery.jpg">
- <p id="description">Choose an image</p>
- </ul>
- </body>
- <script type="text/javascript" src="scripts/showPic.js"></script>
- </html>
css 代码复制内容到剪贴板
- body{
- font-family: "Helvetica","Arial",serif;
- color: #333;
- background-color: #ccc;
- margin: 1em 10%;
- }
- h1{
- color: #333;
- background-color: transparent;
- }
- a{
- color: #008000;
- 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
- }
cpp 代码复制内容到剪贴板
- function showPic(whichPic){
- var num1=whichPic.getAttribute("href");
- var placeholder=document.getElementById("placeholder");
- placeholder.setAttribute("src",num1);
- var titleNume2=whichPic.getAttribute("title");
- var description=document.getElementById("description");
- /*
- 注:将titleNume2的值赋值给descriptionText
- 将titleNume2直接赋值给description.innerText
- 是不一样的
- */
- //var descriptionText=description.innerText;
- //descriptionText=titleNume2;
- // 下面这两种方式都可以实现P标签里的内容替换
- //description.innerText=titleNume2;
- description.firstChild.nodeValue=titleNume2;
- }
获得更多 -> 编程技巧 -> JSP编程技巧
责任编辑: webmaster >>> 百度上搜索 谷歌上搜索
点击复制本连接 (http://www.hugesky.com/showarticle.php?id=7177)>>> 相关资讯:
【声明】: 以上文章或资料除注明为电脑技巧原创或编辑整理外,均为网络收集整理或网友推荐。以上内容以共享、参考、研究为目的,不存在任何商业目的。 未注明作者或出处的文章,可能资料来源不规范。如有涉及版权请给予及时联系更正或予以删除。 |