相册展示
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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· DeepSeekV3+Roo Code,智能编码好助手
· AI编程:如何编写提示词