Question

我有可拖动的DIV。这些DIV中附有图像。当鼠标悬停在DIV上时，图像的opacity将更改为1。当鼠标移出时，图像会变得不透明0。

点击我要将图片从close_1.jpg更改为图片close_2.jpg - 并停止拖动该DIV。
我想将图像的位置更改为左侧+顶侧。 5px上层DIV。

CSS

div {
      width:200px;
      padding:10px;
      border: 2px solid #fff;
      cursor: pointer;
      background: #ccc;
}

HTML

<img class="close" src="http://ynternet.sk/test2/close_1.jpg" />
   <div>Demo 1 Div </div>
   <div>Demo 2 Div </div>
   <div>Demo 3 Div </div>

的JavaScript

$(document).ready(function() {
  $('div').append( $("img.close").css("opacity", "0" ));
  $('div').find('img.close').css("paddingLeft", "20px");
  $('div').mouseover(function() {
      $(this).stop().animate({borderColor: "#aaa" }, "slow");
      $(this).find('img.close').css("opacity", "1");
  }).mouseout(function() {
      $(this).stop().animate({borderColor: "#fff" }, "slow");
      $(this).find('img.close').css("opacity", "0");
  })
  $('div').draggable({ grid: [ 10,10 ] });
});

Answer 1

添加此项将停止拖动并更改图像：

$('div img').click(function() {
    $(this).attr('src', 'http://ynternet.sk/test2/close_2.jpg').parent().draggable("destroy");
});

<强> jsFiddle example

我不清楚“5px上DIV”在＃2中的意思。

Answer 2

我想这可能会解决-5px

div img.close {
 position: absolute;
 float: left;
 top: -15px; 
 right: 5px;
}

http://jsfiddle.net/mevbF/23/

在可拖动的DIV＆amp;中添加图像按钮单击时切换图像源

2 个答案: