好的，我在HTML的一部分中有几个div。我需要一些帮助让Div标签滑出（水平向左/向右或垂直向上/向下，具体取决于设置）。但是当div滑出页面的同时，我需要另一个div从页面的另一侧滑入。所以它看起来像幻灯片，但它不是幻灯片。因此，当用户点击下一个按钮/链接时，它应该向外滑动（向左）显示在那里，然后滑入（从右侧）下一个标记。
我可以让标签隐藏并显示使用块，并且在没有滑动的情况下做到这一点很好，但是我需要它来滑动。这是我到目前为止所得到的......
<!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向右/向左或向下/向上滑动，具体取决于在别处选择的内容。但是需要一步一步地完成。
有人可以帮助我吗？
答案 0 :(得分：2)
我强烈建议使用javascript库来处理这个问题。这是我使用jquery构建的一个快速而脏的示例：http://jsfiddle.net/hyu42/它背后的想法是创建一个容器div作为掩码并包含动画节点（在这种情况下，它们将替换为您的日历内容）。当用户进行交互时，您可以相应地移动内部节点元素的位置。