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

效果图如下:

文件结构如下图：

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. HTML--CSS样式表--基本概念（超链接的状态）

    样式表的基本概念 一.样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;"> ...

  2. codeforces 609B

    #include<bits/stdc++.h> using namespace std; ]; int main() { memset(num,,sizeof(num)); int n,m ...

  3. H3C PAP验证配置示例

  4. POJ 2251宽搜、

    因为这个题做了两次犯了两次不同的错误. 第一次用的dfs死活都超时 第二次把定义队列定义在了全局变量的位置,导致连WA了几次.最后找到原因的我真的想一巴掌拍死自己 #include<cstdio ...

  5. python模块之hashlib模块

    hashlib模块:提供摘要算法 格式: hashlib格式: obj = hashlib.算法(md5,sha....) obj.update(摘要内容:bytes类型) result = obj. ...

  6. linux ioctl 接口

    大部分驱动需要 -- 除了读写设备的能力 -- 通过设备驱动进行各种硬件控制的能力. 大 部分设备可进行超出简单的数据传输之外的操作; 用户空间必须常常能够请求, 例如, 设 备锁上它的门, 弹出它的 ...

  7. linux /proc 接口

    无论何时一个硬件中断到达处理器, 一个内部的计数器递增, 提供了一个方法来检查设备 是否如希望地工作. 报告的中断显示在 /proc/interrupts. 下面的快照取自一个双处理 器 Pentiu ...

  8. 一排盒子，jq鼠标移入的盒子动画移出停止动画,css动画

    css .category > div.active { animation: servicetobig 0.5s ease 1 forwards; } @keyframes serviceto ...

  9. ppk on javascript 笔记（六）--BOM

    浏览器对象模型(Browser Object Model)是语言核心和DOM之间的一个过渡层,这个过渡层特指Javascript的客户端实现,它的主要任务是管理浏览器窗口并使得它们可以彼此通信.win ...

  10. 【35.53%】【POJ 2912】Rochambeau

    Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 2837 Accepted: 1008 Description N childre ...