相册展示
html文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <! DOCTYPE html> < html > < head lang="en"> < meta charset="UTF-8"> < title ></ title > < style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } 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; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </ style > < script src="../jquery-1.12.4.js"></ script > < script > $(function () { //1. 给所有的a注册点击事件 $("#imagegallery a").click(function () { var href = $(this).attr("href"); $("#image").attr("src", href); var title = $(this).attr("title"); $("#des").text(title); return false; }); }); </ script > </ head > < body > < h2 > 美女画廊 </ h2 > < ul id="imagegallery"> < li >< a href="images/1.jpg" title="美女A"> < img src="images/1-small.jpg" width="100" alt="美女1"/> </ a ></ li > < li >< a href="images/2.jpg" title="美女B"> < img src="images/2-small.jpg" width="100" alt="美女2"/> </ a ></ li > < li >< a href="images/3.jpg" title="美女C"> < img src="images/3-small.jpg" width="100" alt="美女3"/> </ a ></ li > < li >< a href="images/4.jpg" title="美女D"> < img src="images/4-small.jpg" width="100" alt="美女4"/> </ a ></ li > </ ul > < div style="clear:both"></ div > < img id="image" src="images/placeholder.png" alt="" width="450px"/> < p id="des">选择一个图片</ p > </ body > </ html > |
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· 【译】.NET 升级助手现在支持升级到集中式包管理
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· Tinyfox 发生重大改版