Jquery实现图片管理
这里实现的是一个图片的在线管理，类似于网络相册的图片管理。
效果图如下:
文件结构如下图：
style2.css文件内容如下：
@charset "utf-8"; *{ margin:0; padding:0; } img { border:none; } ul,li{ list-style:none} ul li{ float:left;margin:0 10px} ul li img{ width:200px; height:200px} .imgbox { width:200px; height:200px; margin:0 auto; position:relative; } .text { width:200px; height:auto; background-color:#000; FILTER:alpha(opacity=60); opacity:0.7; -moz-opacity:0.7; position:absolute; left:0px; bottom:0px; } .imgbt { width:180px; height:30px; padding:0px 10px; } .imgtext { width:180px; height:auto; float:left; padding:10px; color:#fff; font-size:12px; line-height:200%; text-align:center }
ImageManager.html文件类容如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>在线管理</title> <link rel="stylesheet" type="text/css" href="css/style2.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/image_manager.js"></script> </head> <body> </body> </html>
jquery.js文件这里就不说了，可以去网上下载。
image_manager.js文件内容如下：
$(document).ready(function () { //显示图片列表 var $wrap = $("body"); var str = ''; for (var i = 0; i < 7; i++) { src = "http://localhost/images/" + i + ".jpg"; var img = new Image(); img.src = src if (i === 0) str += '<ul>'; str += '<li><div class="imgbox">'; str += '<img id="' + i + '.png";width="250px";height="250px"; src="' + src + '" title="' + i + '" />'; str += '<div class="text"><div class="imgtext" onclick="DeleteImage(this)"> 删 除</div></div></div></li>'; } str += '</u>'; $wrap.append(str); }); function DeleteImage(imgdiv) { var imgtitle = $("img", $(imgdiv).parent().parent())[0].title; var mess = confirm("是否删除" + imgtitle + "?"); if (mess == true) {//开始删除图片 $(imgdiv).parent().parent().parent().remove(); } }
HTML页面运行后元素如下图：
这里主要说一下image_manager.js文件，说一下jquery的语法：
$wrap.append(str);$wrap是一个body元素,append可以将str附加到body元素的末尾。如果str不是一个完整的标签，附加的时候就很有很能出现问题。
$(imgdiv).parent()点击的图片，class为text所在的div。
$("img", $(imgdiv).parent().parent())[0]获取的就是当前点击的图片的标签了。
posted on 2015-12-31 23:51 Geography爱好者 阅读(1256) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具