Slyweb
На разработку сайта! Скидки 50%!

выкативание в право и лево

Вы можете задавать любые вопросы по jQuery.

выкативание в право и лево

Сообщение ZekMan » 13 июл 2010, 08:43

Есть следующие:
Код: Выделить всё
var current_location_href;
$(function() {
    if ($.browser.msie) {
        $(document.body).append('<iframe frameborder="0" style="width:0; height:0;" name="hist" src="hist.html?url=' + escape(self.location.href) + '"></iframe>');
    }
    window.setInterval(function() {
        if (current_location_href != window.location.href) {
            if (document.frames && document.frames['hist']) {
                document.frames['hist'].window.location.href = 'hist.html?url=' + escape(self.location.href);
            }
            current_location_href = window.location.href;
            var sep_pos = current_location_href.indexOf('#');
            var url = sep_pos >= 0 ? current_location_href.substring(sep_pos + 1) : '';
            if ( ! url) {
                url = "main";
            }
            if ( ! $("a[name=" + url + "]").next().is(":visible")) {
                $("div.layer").slideUp();
                $("a[name=" + url + "]").next().slideDown();
            }
        }
    }, 20);
    $("div.layer").hide();
});

Все это делает эфект свертывания и развертывания по вертикале div'ов с классом layer по якорям.

Нужно сделать так что бы свертывание/развертывание было по горизонтали а лучше просто перекат, разобраться попытался но jquery не учил так что ничего не получилось Т_Т

Полный код страницы:
Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Одностраничный сайт</title>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <style type="text/css">
body, html {
        margin:0;padding:0;
        width: 100%;
    background: #eee;
}       

h1 {
    padding: 0.5em 1em;
    margin: 0;
}
h2 {
    margin: 0;
}
ul.menu {
    list-style: none;
    margin: 0;
    padding: 5px;
    margin-bottom: 2px;
    background: #ddd;
}
.content {
    background: #eee;
    padding: 5px;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">//<![CDATA[
var current_location_href;
$(function() {
    if ($.browser.msie) {
        $(document.body).append('<iframe frameborder="0" style="width:0; height:0;" name="hist" src="hist.html?url=' + escape(self.location.href) + '"></iframe>');
    }
    window.setInterval(function() {
        if (current_location_href != window.location.href) {
            if (document.frames && document.frames['hist']) {
                document.frames['hist'].window.location.href = 'hist.html?url=' + escape(self.location.href);
            }
            current_location_href = window.location.href;
            var sep_pos = current_location_href.indexOf('#');
            var url = sep_pos >= 0 ? current_location_href.substring(sep_pos + 1) : '';
            if ( ! url) {
                url = "main";
            }
            if ( ! $("a[name=" + url + "]").next().is(":visible")) {
                $("div.layer").slideUp();
                $("a[name=" + url + "]").next().slideDown();
            }
        }
    }, 20);
    $("div.layer").hide();
});
//]]></script>
</head>
<body>


<div class="content">

<a name="main"></a>
<div class="layer">
<ul class="menu">
<li><a href="#">Главная страница</a></li>
<li><a href="#about">Зачем это нужно</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
<h2>Добро пожаловать!</h2>
<p>Это пример одностраничного сайта, простейший каркас, к котором Вы можете прикрутить большинство небольших сайтов.</p>
<p>Так же это демонстрация простейшей реализации технологии перехода по ссылкам без перезагрузки страницы, при желании можно прикрутить подгрузку данных страниц через Ajax.</p>
</div>

<a name="about"></a>
<div class="layer">
<ul class="menu">
<li><a href="#">Главная страница</a></li>
<li><a href="#about">Зачем это нужно</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
<h2>Для чего нужен такой сайт</h2>
<p>Исходный код этого сайта позволяет быстро сделать привлекательный информационный сайт с небольшим количеством статичных страниц.</p>
</div>

<a name="contacts"></a>
<div class="layer">
<ul class="menu">
<li><a href="#">Главная страница</a></li>
<li><a href="#about">Зачем это нужно</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
<h2>Контактная информация</h2>
<p>E-mail: </p>
</div>

</div>
</body>
</html>


P.S. в JS и Jquery не силен =(
ZekMan
 
Сообщения: 1
Зарегистрирован: 13 июл 2010, 08:40

Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2