Хорошо, у меня есть несколько делений в разделе HTML.Мне нужна помощь, чтобы вытащить теги 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 либо вправо / влево или вниз /в зависимости от того, что было выбрано в другом месте.Но нужно делать это шаг за шагом.
Может кто-нибудь помочь мне?