电脑技巧.图片新闻 | 用户注册 | 用户中心 | 发表文章 | 留言簿 | 二维码
  |繁体中文|  RSS订阅 |极速版  |扫描二维码  
电脑技巧,计算机,电脑知识,组装维修,经验,资料精华宝库,HUGESKY CMS官网，鸿天全站,HUGESKY-最简单的网页图片相处库浏览页面代码
本站申明：
本站尽量纯净无广告，提供交流学习类共享资料。[广告投放说明] [联系]
  • 首 页
  • 电脑知识
  • 应用技巧
  • 组装技巧
  • 维修技巧
  • 网络技巧
  • 组网通信
  • 办公技巧
  • 技巧视频
  • 编程技巧
  • 防毒技巧
  • 博客圈
会员注册关闭
帐号: 密码: 验证码: 点击显示验证码 记住
电脑技巧 -> 编程技巧 -> JSP编程技巧

最简单的网页图片相处库浏览页面代码

作者: 未知 来源: 网络收集 整理日期: 2021-05-05
推荐指数: 点击:534   文字大小: 加入收藏夹

功能描述：
 点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面。

html 代码复制内容到剪贴板
  1. //html代码  
  2. <!docTYPE html>  
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>Image Gallery</title>    
  7.     <link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">  
  8. </head>  
  9. <body>  
  10.   <!-- 功能:点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面 -->  
  11.    <h1>Snapshots</h1>  
  12.    <ul id="imagegal">     
  13.     <li>  
  14.     <a href="Image/rose.jpg" onclick="showPic(this);return false" title="rose Image">rose Image</a></li>  
  15.     <li>  
  16.     <a href="Image/bird.jpg" onclick="showPic(this);return false" title="bird Image">bird Image</a>  
  17.     </li>  
  18.     <li><a href="Image/shanghai.jpg" onclick="showPic(this);return false" title="shanghai Image">shanghai Image</a>  
  19.     </li>  
  20.     <li><a href="Image/beautifulrose.jpg" onclick="showPic(this);return false" title="beautifulrose Image">beautifulrose Image</a>  
  21.     </li>  
  22.     <img id="placeholder" src="Image/gallery.jpg">  
  23.     <p id="description">Choose an image</p>  
  24.    </ul>  
  25. </body>  
  26.  <script type="text/javascript" src="scripts/showPic.js"></script>  
  27. </html>  
CSS代码：
css 代码复制内容到剪贴板
  1. body{   
  2.    font-family: "Helvetica","Arial",serif;  
  3.    color: #333;  
  4.    background-color: #ccc;  
  5.    margin: 1em 10%;  
  6. }  
  7.    
  8. h1{  
  9.     color: #333;  
  10.     background-color: transparent;  
  11. }  
  12.    
  13. a{  
  14.     color: #008000;  
  15.     background-color: transparent;  
  16.     font-weight: bold;  
  17.     text-decoration: none;  
  18. }  
  19.    
  20. ul{  
  21.     padding: 0;  
  22. }  
  23.    
  24. li{  
  25.     float: left;  
  26.     padding: 1em;  
  27.     list-style: none;  
  28. }  
  29.    
  30. img{  
  31.     display: block;  
  32.     clear: both  
  33. }  
JS文件代码：
cpp 代码复制内容到剪贴板
  1. function showPic(whichPic){  
  2.          
  3.         var num1=whichPic.getAttribute("href");  
  4.         var placeholder=document.getElementById("placeholder");  
  5.         placeholder.setAttribute("src",num1);  
  6.           
  7.         var titleNume2=whichPic.getAttribute("title");  
  8.         var description=document.getElementById("description");  
  9.           
  10.         /* 
  11.           注:将titleNume2的值赋值给descriptionText 
  12.           将titleNume2直接赋值给description.innerText 
  13.           是不一样的 
  14.         */  
  15.         //var descriptionText=description.innerText;  
  16.         //descriptionText=titleNume2;  
  17.           
  18.          // 下面这两种方式都可以实现P标签里的内容替换  
  19.         //description.innerText=titleNume2;  
  20.           
  21.         description.firstChild.nodeValue=titleNume2;      
  22.   
  23. }  


获得更多 -> 编程技巧 -> JSP编程技巧
技术支持

责任编辑: webmaster >>> 百度上搜索  谷歌上搜索

hugesky
点击复制本连接 （http://www.hugesky.com/showarticle.php?id=7177）

  转换为打印版本   在本站发表文章    关闭本页窗口
 查询mysql 的被删除的所有ID
 Apple Pencil是一款智能触控电容笔(苹果牌铅笔)

>>> 相关资讯：

  • . jsp无刷新文件上传的实现
  • . JSP显示内容缓存技巧
  • . JSP如何防范SQL注入攻击
  • . jsp服务器的安装与配置
  • . js检测提交的字符串含有特殊字符
  • . jsp中获取客户端的浏览器和操作系统信
  • . JSP/Servlet应用程序优化八法
  • . java和jsp编程中应该注意的问题
  • . jsp中文问题解决方案
  • . 判断下当前的网址中是https还是http网
【声明】：
以上文章或资料除注明为电脑技巧原创或编辑整理外，均为网络收集整理或网友推荐。以上内容以共享、参考、研究为目的，不存在任何商业目的。
未注明作者或出处的文章，可能资料来源不规范。如有涉及版权请给予及时联系更正或予以删除。
评论:(开放)

  网友评论： 评  
以下网友评论只代表网友个人观点，不代表本站观点
  发表评论：（匿名用户不能发表评论！ 注册 登陆）
昵称: 验证码：
评分:
5 4 3 2 1
内容:
  请文明参与讨论，禁止漫骂攻击。
 
·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任.
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据.
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为.
内容搜索
    • 站内搜索
热门资讯
  • [图文]来,来,来,火绒剑干掉Aliba...
  • 公共DNS服务器IP地址大全
  • 电脑快捷键全都在这了！电脑技巧...
  • 图说最常用的10个电脑技巧
  • 别说你不会？这9个电脑技巧你必须...
  • Win7解决C盘占用空间大的方法
  • 网银密码设置小技巧
  • win7安装AHCI驱动
  • [推荐]五步搞定电脑网络安全 五步...
  • 平板电脑选购六大要点
广告位置
开启模板：NEWSKY -关于版权 - 隐私保护 - 联系我们 - 网站地图 - 会员列表 - 加入收藏 - 返回顶部

我问佛：如何才能如你般睿智？ 佛曰：佛是过来人，人是未来佛。
部分资源收集于互联网并遵循 署名-非商业性使用-相同方式共享3.0共享，尽量署名原创。
据《信息网络传播权保护条例》 如侵犯您的权利，请联系webmaster(at)hugesky.com删除。
Power By HugeSky.Com
Copyright© www.hugesky.com
Powered by HUGESKY CMS 7.1.1.1080918 professional licensed