添加图像按钮在可拖动的DIV和切换图像源点击

我有可拖动的DIV的。图像被附加在这些DIV中。当鼠标在DIV的上方时，图像的opacity更改为1。当鼠标不在时，图像不透明0。添加图像按钮在可拖动的DIV和切换图像源点击

在点击我想从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 ] }); 
});

来源

2012-04-10 Patrik

例如> http://jsfiddle.net/ynternet/mevbF/18/ – Patrik 2012-04-10 16:06:17

就是你能为5px上DIV是什么意思？ – ClayKaboom 2012-04-10 16:38:24

@Patrik - 风格声明如何成为这个问题的可接受答案？ – j08691 2012-04-12 13:22:17

添加此将停止拖拽，改变形象：

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

jsFiddle example。

我只是不清楚你在＃2中的意思是“5px upper DIV”。

来源

2012-04-10 16:30:16 j08691

谢谢你，它工作正常，但...我想通过鼠标点击它，并且还改变IMG。：] – Patrik 2012-04-11 09:45:05

http://jsfiddle.net/ynternet/mevbF/25/ – Patrik 2012-04-11 09:46:25

我想这可能会解决这个-5px

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

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

来源

2012-04-10 16:44:14

谢谢，它工作正常：] – Patrik 2012-04-11 15:28:55

添加图像按钮在可拖动的DIV和切换图像源点击

回答

相关问题