我正在尝试上传一些图像并在空DIV中显示它们并在上传后如果我将鼠标悬停在图像上我应该得到一个删除图标,以便用户应该能够用动画删除它并将下一个图像移动到删除形象位置.

我如何实现这一目标?

这是我上传和附加到div容器的方式:

<script type="text/javascript">
 $(function () {
     document.getElementById('Nextbutton').style.visibility = "hidden"; // show 
     $("#uploader").plupload({
         // General settings
         runtimes: 'gears,flash,silverlight,browserplus,html5',url: 'Test.aspx',max_file_size: '10mb',max_file_count: 20,chunk_size: '1mb',unique_names: true,filters: [
            { title: "Image files",extensions: "jpg,gif,png" },{ title: "Zip files",extensions: "zip" }
        ],flash_swf_url: 'js/plupload.flash.swf',silverlight_xap_url: 'js/plupload.silverlight.xap'
     });



     $('form').submit(function (e) {
         var uploader = $('#uploader').plupload('getUploader');

         if (uploader.files.length > 0) {

             uploader.bind('StateChanged',function () {
                 if (uploader.files.length === (uploader.total.uploaded + uploader.total.Failed)) {
                     $('form')[0].submit();
                 }
             });

             uploader.start();

         }
         else
         //alert('You must at least upload one file.');

             return false;
     });
     var uploader = $('#uploader').plupload('getUploader');

     uploader.bind('FilesAdded',function (up,files) {
         //              jQuery('#container a').html('');
         $('#container > *').remove();
         var i = 0;
         while (i++ < up.files.length) {
             var ii = i;
             while (ii < up.files.length) {
                 if (up.files[i - 1].name == up.files[ii].name) {
                     $.msgBox({
                         title: "Ooops",content: "There is already an image with the same filename and cannot be added.",type: "error",showButtons: true,opacity: 0.9,autoClose: false
                     });
                     uploader.removeFile(up.files[ii]);
                 } else {
                     ii++;
                 }
             }
         }
         if (i > 20) {
             $.msgBox({
                 title: "Info",content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",type: "info",autoClose: false
             });
             $('#uploader_browse').hide();
         }
     });
     uploader.bind('FilesRemoved',files) {
         if (up.files.length < 20) {
             $('#uploader_browse').fadeIn("slow");
         }
     });


     uploader.bind('FileUploaded',file,res) {
         $('#container').append("<div class='container a'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "'  rel='prettyPhoto' target='blank'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/></a></div>");



         var $imageContainers = $('#container a');

         $imageContainers.each(function (index) {
             $(this).delay(index * 50).fadeto(400,0.5);
         });

         $imageContainers.mouSEOver(function () {
             $(this).css('opacity',1);
             $(this).find('span.del').show();
         });
         $imageContainers.mouSEOut(function () {
             $(this).css('opacity',0.5);
             $(this).find('span.del').hide();
         });



         if (uploader.files.length === (uploader.total.uploaded + uploader.total.Failed)) {
             document.getElementById('Nextbutton').style.visibility = "visible"; // show 
             showStickySuccesstoast();
         }
         uploader.removeFile(file);
     });

 });


     function randomString(length) {
         var chars = '0123456789ABCDEFGHIJKLMnopQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

         if (!length) {
             length = Math.floor(Math.random() * chars.length);
         }

         var str = '';
         for (var i = 0; i < length; i++) {
             str += chars[Math.floor(Math.random() * chars.length)];
         }
         return str;
     }

    </script>

这是我显示图像的div:

<div id="container">
</div>

解决方法

有关演示,请访问: http://jsfiddle.net/CWaHL/1/

HTML

<div id="container">
  <div class="image" id="image1" style="background-image:url(http://lorempixel.com/100/100/abstract);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image2" style="background-image:url(http://lorempixel.com/100/100/food);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image3" style="background-image:url(http://lorempixel.com/100/100/people);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image4" style="background-image:url(http://lorempixel.com/100/100/technics);">
    <a href="#" class="delete">Delete</a>
  </div>
</div>

CSS

#container { overflow:auto; }
.image { width:100px;height:100px;float:left;position:relative; }
a.delete { display:none;position:absolute;top:0;right:0;width:30px;height:30px;text-indent:-999px;background:red; }
.image:hover a.delete { display:block; }

jQuery的/ JavaScript的

$(document).ready(function(){

  $('a.delete').on('click',function(e){
    e.preventDefault();
    imageID = $(this).closest('.image')[0].id;
    alert('Now deleting "'+imageID+'"');
    $(this).closest('.image')
      .fadeto(300,function(){
        $(this)
          .animate({width:0},200,function(){
            $(this)
              .remove();
          });
      });
  });

});

如何使用jquery将删除图像/图标附加到div内的图像的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  3. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  4. swift tableview中添加侧滑删除功能 类似qq删除

    在UITableViewDelegate中继承三个方法functableView(tableView:UITableView,canEditRowAtIndexPathindexPath:NSIndexPath)->BoolfunctableView(tableView:UITableView,editingStyleForRowAtIndexPathindexPath:NSIndexPath)-

  5. swift http post/get/delete/put

    Swift中的HTTP请求iOS开发中大部分App的网络数据交换是基于HTTP协议的。这个库通过封装NSURLSession,提供了GET/POST/PUT/DELETE以及上传和下载的支持,比较全面:4.使用Objective-C中的AFNetworking网络库AFNetworking库是在iOS开发领域享有盛名、功能强大的网络请求库。

  6. 使用swift开发OSX应用

    选择Swift作为开发语言,保持所有选项框反选,documentextension栏保留为空白。确保“AlsocreateXIBfileforuserinterface”为勾选,然后点Next。需要注意的是,在MacApp中,有大量的类和iOS中都类似,只不过是以NS前缀命名。在applicationDidFinishLaunching方法内,加入以下语句:masterViewController=MasterViewControllerwindow.contentView.addSubviewmaste

  7. 制作一个可以滑动操作的 Table View Cell

    本教程将会向你展示如何制作一个这样的TableViewCell,而不用因嵌套的ScrollView陷入困境。如果你还不知道一个可滑动的TableViewCell意味着什么,那么看看Apple的邮件应用:可能你会想,既然Apple展示了这种方案,那它应该已将其开放给开发者使用了。这会要求你深入研究iOS7UITableViewCell的结构,以便复制出我们需要的行为。打开MasterViewController.m并找到viewDidLoad。这个循环添加了一些字符串到_objects数组,应用运行时,这些

  8. 从Coredata Swift中删除数据

    而我正在尝试删除一个项目。更新我的编码问题,执行swift和coredata中的数据删除。这个代码我结束了,工作。编辑上面的Swift2.2和Xcode7.3.1还需要这两行代码来纠正。

  9. 从特定的Realm对象Swift中删除所有数据

    在我对我的问题太深入之前我的目标,可能会影响你的答案,是删除对象数据,如果它不再在云中.所以如果我有一个数组[“一”,“二”,“三”]然后在我的服务器我删除“两个”我想要我的境界来更新这个变化.我认为最好的方法是删除特定对象中的所有数据,然后调用我的RESTAPI来下载新的数据.如果有更好的方法,请让我知道.好的,这是我的问题.我有一个对象通知()每次调用我的RESTAPI之前,下载我运行的任何东

  10. android Volley删除方法,为什么会发送空参数

    我有一些不明白从服务器发送请求与json和DELETE方法的问题.请求成功连接到服务器但服务器将收到的已发送参数为空.但标题请求工作正常!

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部