Unobtrusive horizontal scrolling with CSS and jQuery_问答_开发者

One of my most favorite websites is that of the Oxford Hotel in Romania.

I like the simplicity of the site and how it flows. I am trying to create a similar scrolling effect using jquery and I've been somewhat successful to a point. My trouble is with css... I am not a wizard in that department.

Anyway,...my questions!

1. How can I first make sure that the ".box" class will be in the center of the page when the corresponding link is clicked? Right now it positions itself on the left.

2. Then, how can I tweak this code so that the user only can see the width of the screen and not the browser scroller/the rest of my ".box" divs?

Refer to the oxford link if you need to see an example of what I'd like to achieve.

This is a portion of my current 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-typ开发者_开发知识库e: 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;
}

Your CSS contains a lot of unnecessary stuff and is not really SSCCE-flavored, so it's hard to nail down the root cause of your problem. To start, you can get it to work in a JS-disabled environment with help of fragment identifiers (<a href="#someid"> with <div id="#someid">). The remnant of the magic is done with overflow: hidden (so that "other" boxes don't show up) and position: relative (so that the element knows where it is relatively to be positioned to).

Well, here's an SSCCE so that you have something to get started with. Just copy'n'paste'n'run it.

<!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>

You can find here a live example. Hope this helps.

You are in luck, friend. I just yesterday released a new jQuery plugin that does this very thing:

http://www.simplesli.de

I've tried to make it as simple as possible to set up, but basically, in each slide, you can create a div in any way you like. Best of luck!