Sliding out Div, Slide in another Div at the same time
Ok, I have a few divs within a section of HTML. I need some help getting the Div tags to slide out (either horizontally to the left/right or vertically going up/down, depending on a setting). But at the same time when a div is sliding out of the page, I need another div to slide in from the opposite side of the page. So it will sort of look like a slideshow, but it's not a slideshow. So when the user clicks on the next button/link, it should slide out (to the left) the that is showing on there, and slide-in (coming from the right) the next tag.
I can get the tags to hide and show using blocks, and do this fine without the sliding, but I need it to slide. Here's what I got so far...
<!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>
So the above is all of the code, as you can see I'd like to slide the current months div either to the right/left or down/up depending on what's been selected elsewhere. But need to do it one step at a time.
Can anyone please help me?
I'd highly recommend using a javascript library to handle this. Here's a quick and dirty sample I built using jquery: http://jsfiddle.net/hyu42/ The idea behind it is to create a container div that acts as a mask and contains the node to animate (in this case, they would be replaced with your calendar content). When the user interacts, you shift the position of the interior node element accordingly.
加载中,请稍侯......
精彩评论