这里实现的是一个图片的在线管理，类似于网络相册的图片管理。

效果图如下:

文件结构如下图：

style2.css文件内容如下：

@charset "utf-8";

*{ margin:; padding:; }

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]获取的就是当前点击的图片的标签了。
 
 

Jquery实现图片管理的更多相关文章

  1. ASP.NET MVC图片管理(更新)

    Insus.NET在ASP.NET MVC专案中,实现了图片管理,上传,预览,显示,删除等功能,还差一个功能,就是更新图片的功能,那这次来完成它.你可以先参考前2篇<ASP.NET MVC图片管 ...

  2. ASP.NET MVC图片管理(删除)

    上星期有写了一篇<ASP.NET MVC图片管理(上传,预览与显示)>http://www.cnblogs.com/insus/p/4620420.html 它只实现了上传功能,即时预览以 ...

  3. MVC3学习：实现简单的相册管理和图片管理

    相册管理说白了就是文件夹管理,因此要用到命名空间using System.IO; 一.先来做相册管理,添加相册我就不做了,就是添加文件夹,这里主要做一下相册的显示.相册在页面上显示,需要一张图片,可以 ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  6. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  7. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  8. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  9. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

随机推荐

  1. jq添加插入删除元素

    https://www.cnblogs.com/sandraryan/ append() - 在被选元素的结尾插入内容 <body> <div class="wrap&qu ...

  2. Python--day69--ORM的F查询和Q查询

    F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F() 的实例可 ...

  3. HTTP协议---三次握手

    HTTP协议 关于协议 ​ 对于应用层开发人员,接触最多的网络协议通常都是传输层的TCP,为什么这么说,因为再往上的应用层协议,如:HTTP.HTTPS.POP3.SMTP.RPC.FTP.TELNE ...

  4. js随即数字random实现div点击更换背景色

    需求:点击按钮随机给盒子换背景色 用到的知识点:Math.random    Math.round 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCT ...

  5. H3C OSPF可选配置命令

  6. svn 删除、移动和改名

    删除.移动和改名 Subversion allows renaming and moving of files and folders. So there are menu entries for d ...

  7. React---钩子函数

    钩子函数的状态有4个阶段: <p>1.初始化阶段  (componentWillMount() || componentDidMount()) </p>             ...

  8. MVC3 学习笔记 之（ajax表单）

    mvc 提供了一种ajax提交表单的方式.与普通表单不同的是,它是一个异步表单. 在开始使用之前,需要引用以下文件: <script src="@Url.Content("~ ...

  9. 超容易理解的call()、apply()、bind()的区别

    call().apply().bind()是用来改变this的指向的. 一 举个例子 一个叫喵喵的猫喜欢吃鱼,一个叫汪汪的小狗喜欢啃骨头,用代码实现如下: 有一天,小狗汪汪和喵喵共进午餐的时候,汪汪说 ...

  10. Linux 内核 启动时间

    为见到 PCI 如何工作的, 我们从系统启动开始, 因为那是设备被配置的时候. 当一个 PCI 设备上电时, 硬件保持非激活. 换句话说, 设备只响应配置交易. 在上电时, 设备没有内存并且没有 I/ ...