好的，我在一段 HTML 中有几个 div。我需要一些帮助让 Div 标签滑出(水平向左/向右或垂直向上/向下，具体取决于设置)。但是在一个div滑出页面的同时，我需要另一个div从页面的对面滑入。所以它看起来有点像幻灯片，但它不是幻灯片。因此，当用户单击下一个按钮/链接时，它应该滑出(向左)显示在此处的标签，然后滑入(从右侧)下一个标签。
我可以使用 block 来隐藏和显示标签，无需滑动就可以做到这一点，但我需要它来滑动。这是我到目前为止得到的...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Slideshow</title>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 2;
current = 1;
function nextCalMonth() {
// Hide current picture
object = document.getElementById('cal' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('cal' + current);
object.style.display = 'block';
}
function previousCalMonth() {
// Hide current picture
object = document.getElementById('cal' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('cal' + current);
object.style.display = 'block';
}
//]]>
// -->
</script>
<style type="text/css">
<!--
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#cal1 {
display: block;
}
-->
</style>
</head>
<body>
<div class="slideShow">
<div class="setTitle">Calendar 2010</div>
<div id="cal1" class="slides">
<div class="slideTitle">September 2010</div>
<table cellspacing="1" class="calendar_table" style="width: 170px;">
<tr>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Su</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">M</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Tu</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">W</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Th</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">F</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Sa</th>
</tr>
<tr>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">1
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">2
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">3
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">4
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">5
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('9_6');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">6
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">7
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">8
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">9
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">10
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">11
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">12
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">13
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">14
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">15
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">16
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">17
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">18
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">19
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">20
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">21
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('9_22');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">22
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">23
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">24
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">25
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">26
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">27
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">28
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">29
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">30
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
</tr>
</table>
</div>
<div id="cal2" class="slides">
<div class="slideTitle">October 2010</div>
<table cellspacing="1" class="calendar_table" style="width: 170px;">
<tr>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Su</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">M</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Tu</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">W</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Th</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">F</th>
<th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Sa</th>
</tr>
<tr>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">1
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">2
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">3
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">4
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">5
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">6
</td>
<td onclick="return dp_collapseCalendar('0_0');" class="calendar_today days hand" style="height: 20px; font-size: x-small;">7
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">8
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">9
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">10
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">11
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">12
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">13
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">14
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">15
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">16
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">17
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">18
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">19
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">20
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">21
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">22
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">23
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('10_24');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">24
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">25
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">26
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">27
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">28
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">29
</td>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">30
</td>
</tr>
<tr>
<td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('10_31');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">31
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
<td class="windowbg days">
</td>
</tr>
</table>
</div>
<!--// And SO ON AND ON AND ON... //-->
<div class="controls">
<a href="javascript:previousCalMonth()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextCalMonth()" style="margin: 10px;">Next »</a>
</div>
</div>
</body>
</html>
所以上面是所有代码，如您所见，我想根据在其他地方选择的内容向右/向左或向下/向上滑动当前月份 div。但需要一步一步来。
谁能帮帮我？
最佳答案
我强烈建议使用 javascript 库来处理这个问题。这是我使用 jquery 构建的一个快速而肮脏的示例:http://jsfiddle.net/hyu42/它背后的想法是创建一个容器 div，它充当 mask 并包含要设置动画的节点(在这种情况下，它们将被替换为您的日历内容)。当用户交互时，您相应地移动内部节点元素的位置。
关于javascript - 滑出Div，同时滑入另一个Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3888006/