使用CSS和jQuery进行不显眼的水平滚动

我最喜欢的网站之一是罗马尼亚的Oxford Hotel。使用CSS和jQuery进行不显眼的水平滚动

我喜欢网站的简单性以及网站流量。我正在尝试使用jquery创建类似的滚动效果，并且我在某种程度上取得了一些成功。我的麻烦是与CSS ...我不是该部门的巫师。

无论如何，...我的问题！

1.我怎样才能确保“.box”类将在页面的中心点击相应的链接时？现在它位于左侧。

2.然后，我怎么可以调整这个代码，使用户只能看到屏幕的宽度，而不是浏览器卷轴/我的“.box的” div的休息吗？

如果您需要查看我希望实现的示例，请参阅牛津链接。

这是我当前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; 
}

来源

2010-04-04 zen

这是非常令人印象深刻的酒店如何设法得到没有Javascript的工作。 – zneak 2010-04-04 03:57:14

@zneak：他们实际上**做**使用JS来平滑滚动部分。 – BalusC 2010-04-04 05:01:58

@BalusC：我的意思是如果你禁用Javascript，它仍然有效。没有平滑的滚动，但仍然有效。 – zneak 2010-04-04 12:23:01

你的CSS中包含了很多不必要的东西，是不是真的SSCCE -flavored，所以很难明确你的问题的根本原因。首先，您可以通过片段标识符（<a href="#someid">和<div id="#someid">）使其在JS禁用的环境中工作。剩下的魔法是用overflow: hidden（这样“其他”框不显示）和position: relative（以便元素知道相对定位到的位置）完成的。

嗯，这是一个SSCCE，让你有一些开始。只需复制'n'paste'n'run就可以了。

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

您可以在这里找到一个live example。希望这可以帮助。

来源

2010-04-04 04:52:18 BalusC

你很幸运，朋友。我昨天刚刚发布了一个新的jQuery插件，做这事：

http://www.simplesli.de

我试图使它尽可能的简单设置，但基本上，每张幻灯片中，您可以创建一个div以任何你喜欢的方式。祝你好运！

来源

2010-04-06 20:03:29 dclowd9901

链接中的答案已死。 – Pang 2017-06-23 00:14:22

使用CSS和jQuery进行不显眼的水平滚动

回答

相关问题