Question

爵士

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  
  <style>
  .leftpanel1 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:100;
	top:0;
	background:red;
  }
  .rightpanel1 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:100;top:0;background:red;right:0;
  }
  
  .leftpanel2 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:10;top:0;background:green;
  }
  .rightpanel2 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:10;top:0;background:green;right:0;
  }
  
  .leftpanel3 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:1;top:0;background:#ececec;
  }
  .rightpanel3 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:1;top:0;background:#ececec;
	right:0;
  }
  #container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<a href="#" id="tog1">switch 1,2</a>
<a href="#" id="tog2">switch 3,4</a>
<a href="#" id="tog3">switch 4,5</a>
<div id="container">
 <div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
 <div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
 <div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
</div>
 
<script>
$(window).load(function(){
 $().ready = function() {
    
  $("#tog1").click(function() {
   $( "#toggle1" ).toggle("slide", { direction: "left" });
   $( "#toggle2" ).toggle("slide", { direction: "right" });
  });
  
  $("#tog2").click(function() {
   $( "#toggle3" ).toggle("slide", { direction: "left" });
   $( "#toggle4" ).toggle("slide", { direction: "right" });
  });
  
  $("#tog3").click(function() {
   $( "#toggle5" ).toggle("slide", { direction: "left" });
   $( "#toggle6" ).toggle("slide", { direction: "right" });
  });
}();
});

</script>
 
</body>
</html>

＆＃13;

在上面的代码中，我试图在每个开关的点击上滑动2个div。有3个开关，每个开关有2个滑动div。

默认情况下开关1,2 应该有效， toggle1 ＆amp; toggle2 应该会滑入。点击切换3,4 时，切换1,2无效，他们的两个div应该滑出， toggle3 ＆amp; ; toggle4 应该会滑入。如果点击切换5,6 ，则之前的div滑出， toggle5 ＆amp; toggle6 应该滑行。

希望你能做些需要......

Answer 1

不确定这是否是您需要的。

这适用于两个（或更多）div - 一个带滑块（scroll-master），另一个没有滑块（slave）

//the simultaneous movement of sliders
    $("#master").scroll(function(){//the one you scroll
        sliderPos = $("#master").position(); // get the position
        $("#slave").animate({left:sliderPos.left,},0); // animate the second div
    });

Answer 2

以下是我实现的完整代码.....

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  
  <style>
  .leftpanel1 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:100;
	top:0;
	background:red;
  }
  .rightpanel1 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:100;top:0;background:red;right:0;
  }
  
  .leftpanel2 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:10;top:0;background:green;
  }
  .rightpanel2 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:10;top:0;background:green;right:0;
  }
  
  .leftpanel3 {
    width: 300px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:left;
	z-index:1;top:0;background:#ececec;
  }
  .rightpanel3 {
    width: 695px;
    height: 100px;
    background: #ccc;
	position:absolute;
	float:right;z-index:1;top:0;background:#ececec;
	right:0;
  }
  #container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
  
  .active{color:red;}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
 
<a href="#" id="tog1" class="active">switch 1,2</a>
<a href="#" id="tog2">switch 3,4</a>
<a href="#" id="tog3">switch 4,5</a>
<div id="container">
 <div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
 <div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
 <div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
</div>
 
<script>
$(window).load(function(){
 $().ready = function() {
    
  $("#tog1").click(function() {
   $( "#toggle1" ).toggle("slide", { direction: "left" });
   $( "#toggle2" ).toggle("slide", { direction: "right" });
   
   $('#toggle3').hide();
   $('#toggle4').hide();
   $('#toggle5').hide();
   $('#toggle6').hide();
   
   $("#tog1").addClass("active");
   $("#tog2").removeClass("active");
   $("#tog3").removeClass("active");
  });
  
  $("#tog2").click(function() {
   $( "#toggle3" ).toggle("slide", { direction: "left" });
   $( "#toggle4" ).toggle("slide", { direction: "right" });
   
   $('#toggle1').hide();
   $('#toggle2').hide();
   $('#toggle5').hide();
   $('#toggle6').hide();
   
   $("#tog1").removeClass("active");
   $("#tog2").addClass("active");
   $("#tog3").removeClass("active");
  });
  
  $("#tog3").click(function() {
   $( "#toggle5" ).toggle("slide", { direction: "left" });
   $( "#toggle6" ).toggle("slide", { direction: "right" });
   
   $('#toggle1').hide();
   $('#toggle2').hide();
   $('#toggle3').hide();
   $('#toggle4').hide();
   
   $("#tog1").removeClass("active");
   $("#tog2").removeClass("active");
   $("#tog3").addClass("active");
  });
}();
});

</script>
 
</body>
</html>

点击

2 个答案: