Ненавязчивая горизонтальная прокрутка с помощью CSS и jQuery - PullRequest
Новая
       15

Ненавязчивая горизонтальная прокрутка с помощью CSS и jQuery

2 голосов
/ 04 апреля 2010

Один из моих самых любимых веб-сайтов - сайт Oxford Hotel в Румынии.

Мне нравится простота сайта и как он течет. Я пытаюсь создать подобный эффект прокрутки, используя jquery, и я был в некоторой степени успешным. Моя проблема с CSS ... Я не волшебник в этом отделе.

В любом случае, ... мои вопросы!

1. Как я могу сначала убедиться, что класс ".box" будет в центре страницы при нажатии на соответствующую ссылку? Прямо сейчас он располагается слева.

2. Тогда, как я могу настроить этот код, чтобы пользователь мог видеть только ширину экрана, а не скроллер браузера / остальные мои div .box *? 1015 *

Обратитесь к оксфордской ссылке, если вам нужен пример того, чего я хотел бы достичь.

Это часть моего текущего CSS. 

body {
background: #f2f2f2;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

#menu {
background: #333333;
position: fixed;
top: 0px;
left: 0;
border: 1px solid #000;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}

#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}

#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}

#container {
position: absolute;
top: 120px; 
width: 70000px;
margin: 0;
padding: 0;
}

.box {
background: white;
border: 3px dashed #f2f2f2;
width: 600px;
float: left;
font-size: 10px;
line-height: 15px;
margin: 0;
padding: 5px 30px 30px 30px;
}

Ответы [ 2 ]

4 голосов
/ 04 апреля 2010

Ваш CSS содержит много ненужных вещей и на самом деле не SSCCE , поэтому трудно определить причину вашей проблемы. Для начала вы можете заставить его работать в JS-отключенной среде с помощью идентификаторов фрагментов (<a href="#someid"> с <div id="#someid">). Остаток магии делается с помощью overflow: hidden (чтобы «другие» ящики не появлялись) и position: relative (чтобы элемент знал, где он находится относительно).

Ну, вот SSCCE, так что у вас есть с чего начать. Просто скопируйте и запустите его. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2573478</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#menu a').click(function() {
                    $('#boxes').animate({
                        left: -300 * $('.box').index($(this.hash)) // 300 is width of single box.
                    }, 1000);
                    return false;
                });
            });
        </script>
        <style>
            #container {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden; /* So that #boxes doesn't appear in full glory. */
            }
            #boxes {
                position: relative;
                width: 900px; /* 3 boxes of each 300px makes 900px. */
            }
            #container .box {
                float: left;
                width: 300px;
                height: 300px;
            }
            #box1 { background: #fcc; }
            #box2 { background: #cfc; }
            #box3 { background: #ccf; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="boxes">
                <div id="box1" class="box">box1</div>
                <div id="box2" class="box">box2</div>
                <div id="box3" class="box">box3</div>
            </div>
        </div>
        <ul id="menu">
            <li><a href="#box1">box1</a></li>
            <li><a href="#box2">box2</a></li>
            <li><a href="#box3">box3</a></li>
        </ul>
    </body>
</html>

Вы можете найти здесь живой пример . Надеюсь, это поможет.

1 голос
/ 07 апреля 2010

Тебе повезло, друг. Я только вчера выпустил новый плагин jQuery, который делает именно это:

http://www.simplesli.de

Я постарался максимально упростить настройку, но в основном на каждом слайде вы можете создать div любым удобным вам способом. Желаем удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...