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

效果图如下:

文件结构如下图：

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. H3C 面向连接和无连接的服务

  2. ip2long之后有什么好处？

    ip2long需要bigint来存储,而且在32位和64位系统中存储方式还有区别: 而保存成字符串,只需要char20即可. 那么,ip2long好处在哪? 做投票项目的时候,将ip地址处理后用int ...

  3. centOS 重启 php-fpm

     ps axo pid,%cpu,%mem,comm |grep php-fpm ps aux | grep php-fpm pkill -9 php-fpm /etc/init.d/php-fpm ...

  4. P2P公司是如何进行风险管理的

    关于P2P的风控很多人仍然是一知半解,甚至不少长期P2P圈内的资深玩家对此也是“既没吃过猪肉,也没见过猪跑”.   但是不可否认的是,作为一种跳过银行间接贷款融资模式的.一种在借款人和出借人之间直接发 ...

  5. 1625 - Color Length——[动态规划]

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. UVa1601 - The Morning after Halloween [单向bfs]

    解题思路: 1.注意到2*2方格中必有一个#,那么最多只有192条通道,可以将所有非‘#’的位置提取出来用邻接表的方式建图,通过bfs搜索目标位置. 2.将三个ghost的位置(a,b,c)作为状态量 ...

  7. 2019年湘潭大学程序设计竞赛（重现赛）F.Black&White

    传送门 F.Black&White •题意 操作 m 次后,求连续的1或连续的0的最大值,每次操作只能反转一个位置: •思路1(反悔操作) 定义队列q:依次存放两个零之间的1的个数+1: 首先 ...

  8. P1048 数组中的逆序对

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 输入格式 第一行包含一个整数 \(n\) ,表示数组中的元素个数 ...

  9. 2018-8-10-C＃-局部函数与事件

    title author date CreateTime categories C# 局部函数与事件 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:23 ...

  10. H3C 主动方式建立连接过程