0

ドラッグ可能なDIVがあります。これらのDIVに画像が追加されます。マウスをDIVの上に置くopacityと、画像のがに変更され1ます。マウスを外すと、画像が不透明になり0ます。

  1. close_1.jpgクリックすると、画像をから画像に変更したいので、close_2.jpgそのDIVのドラッグを停止します。

  2. 画像の位置を左上＋上に変えたい。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 ] });
});
4

2 に答える 2

3

これを追加すると、ドラッグが停止し、画像が変更されます。

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

jsFiddle の例。

＃2で「5pxの上位DIV」が何を意味しているのかはっきりしません。

于 2012-04-10T16:30:16.097 に答える
1

これで-5pxが解決するかもしれないと思います

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

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

于 2012-04-10T16:44:14.377 に答える