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

效果图如下:

文件结构如下图：

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. 4-2 setting中一定要将ROBOTSTXT_OBEY = False的注释去掉

    # Obey robots.txt rules##默认遵循robots协议的,默认去读取每个网站上的robots协议ROBOTSTXT_OBEY = False

  2. v-for（：key）绑定index、id、key的区别

    Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key ...

  3. linux版本依赖

    记住, 你的模块代码一定要为每个它要连接的内核版本重新编译 -- 至少, 在缺乏 modversions 时, 这里不涉及因为它们更多的是给内核发布制作者, 而不是开发者. 模块 是紧密结合到一个特殊 ...

  4. P1019 聪聪理扑克

    题目描述 聪聪的两个小伙伴灵灵和豪豪喜欢打扑克,什么斗地主.德州.牛牛,他们都玩的有模有样. 但是每次玩好扑克他们都不整理一下,所以整理扑克的任务就交到了聪聪的手上. 已知现在桌面上有 n 张扑克牌, ...

  5. ReentrantReadWriteLock 可重入的读写锁

    可重入:就是同一个线程可以重复加锁,可以对同一个锁加多次,每次释放的时候会释放一次锁,直到该线程加锁次数为0,这个线程才释放锁. 读写锁: 也就是读锁可以共享,多个线程可以同时拥有读锁,但是写锁却只能 ...

  6. H3C 端口接入控制方式

  7. 原 Linux：ping不通baidu.com

    如果某台Linux服务器ping不通域名, 如下提示:  [root@localhost ~]# ping www.baidu.com ping: unknown host www.baidu.com ...

  8. 【t081】序列长度(贪心做法)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有一个整数序列,我们不知道她的长度是多少(即序列中整数的个数),但我们知道在某些区间中至少有多少个整数 ...

  9. 初识Maven POM

    POM Project Object Model项目对象模型定义了项目的基本信息,用于描述项目如何构建,申明项目依赖,等等. pom元素: <modelVersion>4.0.0</ ...

  10. Linux 内核管理类

    一个类由一个 struct class 的实例来定义: struct class { char *name; struct class_attribute *class_attrs; struct c ...