-1

I have a situation some thing like this

<div id="my div">
    <div>
       content of div 1
    </div>
    <div>
       content of div 2
    </div>
    <div>
       content of div 3
    </div>
</div>

Out of those three div's if I click on any one of them, only that particular div(which I clicked) have to come up affront and rest of all the page should display in background as overlay.

Along with this I should be able to drag that highlighted div on that overlay background to where ever I want.

Can any one suggest me some solution in doing this....

4

2 回答 2

2

尝试使用jQuery UI。
另请参阅此文档页面以获取帮助。
对于拖动看到这个页面，它真的帮助了我。
这是该站点的源代码形式：-

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-   ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
  $( "#draggable" ).draggable();
 });
</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
 <p>Drag me around</p>
</div>


</body>
</html>

对于缩放 div，请使用以下命令：-

 #div_id:hover 
 {
  zoom:30%;
  }

另请参阅此页面。

于 2013-07-30T09:33:28.760 回答
1

http://jsfiddle.net/fa7d0/BqsdE/

您可以设置其他两个 div 的不透明度（例如 0.2）

javascript:

$("#div1").click(function(){
    $("#div2").css('opacity','0.2');
    $("#div3").css('opacity','0.2');
});
$("#div2").click(function(){
    $("#div1").css('opacity','0.2');
    $("#div3").css('opacity','0.2');
});
$("#div3").click(function(){
    $("#div2").css('opacity','0.2');
    $("#div1").css('opacity','0.2');
});

$(".div").each(function(){ //reset all
    $(this).css('opacity','1.0');
});

html:

<div id="mydiv">
<div id='div1' class='div'>
   content of div 1
</div>
<div id='div2' class='div'>
   content of div 2
</div>
<div id='div3' class='div'>
   content of div 3
</div>
</div>

例如，当用户点击三个 div 时，您可以使用重置所有功能

于 2013-07-30T09:56:43.163 回答