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

效果图如下:

文件结构如下图：

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. 在linux上安装pear

    在搭建centreon的过程中,需要pear模块支持. 什么是pear pear是PHP扩展与应用库(the PHP Extension and Application Repository)的缩写. ...

  3. CSS滤镜 :灰色 ,方便站点哀悼

    html {  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...

  4. jekyll 添加 Valine 评论

    本文告诉大家如何在自己搭建的静态博客添加 Valine 评论.在这前,我基本都是使用 多说,但是多说gg啦,所以就在找一个可以替换的评论 本来 Disqus是很好的,但是在国内很难打开,所以我就需要一 ...

  5. java 面试题之交通灯管理系统

    需求: 交通灯管理系统的项目需求 Ø 异步随机生成按照各个路线行驶的车辆. 例如: 由南向而来去往北向的车辆 ---- 直行车辆 由西向而来去往南向的车辆 ---- 右转车辆 由东向而来去往南向的车辆 ...

  6. Total Commander 显示文件包含文件名扩展

    在默认的 Total Commander 是分开文件名和文件扩展,如果想要让文件名同时显示扩展,可以通过设置合并文件名和扩展两列 点击配置,在选项的制表修改显示 How to configure To ...

  7. EJB实例

    两种管理机制: 无状态bean使用实例池技术管理bean 有状态bean使用激活(activation)管理bean 内存对象序列化到磁盘 磁盘反序列化到内存

  8. Nginx与PHP交互过程 + Nginx与PHP通信的两种方式

    一.Nginx与PHP交互过程的7步走(用户对动态PHP网页访问过程) step1:用户将http请求发送给nginx服务器(用户和nginx服务器进行三次握手进行TCP连接) step2:nginx ...

  9. codeforces 677D(分层图dp)

    Codeforces 677D 传送门:https://codeforces.com/contest/677/problem/D 题意: 给你一个n*m的方格图,每个点有一个权值val,现在要求你从坐 ...

  10. ES6类的继承

    ES6 引入了关键字class来定义一个类,constructor是构造方法,this代表实例对象. constructor相当于python的init 而this 则相当于self 类之间通过ext ...