使用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進行不顯眼的水平滾動

回答

相關問題