CSS와 jQuery로 눈에 거슬리지 않는 수평 스크롤

가장 좋아하는 웹 사이트 중 하나는 루마니아의 Oxford Hotel입니다.CSS와 jQuery로 눈에 거슬리지 않는 수평 스크롤

나는 사이트의 단순성과 그것이 어떻게 흐르기를 좋아합니다. jquery를 사용하여 유사한 스크롤링 효과를 만들려고 노력 중이며 다소 성공적이었습니다. 내 문제는 CSS로 ... 나는 그 부서의 마법사가 아니다.

어쨌든, 내 질문!

1. 해당 링크를 클릭 할 때 ".box"클래스가 페이지의 중앙에 위치하도록하려면 어떻게해야합니까? 지금은 왼쪽에 위치합니다.

2. 그렇다면 사용자가 브라우저 스크롤러/나머지 ".box"div가 아닌 화면 너비 만 볼 수 있도록이 코드를 어떻게 조정할 수 있습니까?

달성하고자하는 내용의 예를 보려면 oxford 링크를 참조하십시오.

이것은 현재 사용중인 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

@zneak : 그들은 실제로 ** 부드러운 스크롤링 부분을 위해 JS를 사용합니다. – BalusC

@BalusC : Javascript를 사용 중지해도 여전히 작동합니다. 부드러운 스크롤은 없지만 여전히 작동합니다. – zneak

귀하의 CSS는 불필요한 물건을 많이 포함하고 정말 SSCCE 맛을 낸없는, 그래서 문제의 근본 원인을 못 어렵다. 시작하려면 프래그먼트 식별자 (<a href="#someid">과 <div id="#someid">)의 도움으로 JS가 비활성화 된 환경에서 작동하도록 할 수 있습니다. 마법의 나머지 부분은 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>

여기서 찾을 수 있습니다. live example. 희망이 도움이됩니다.

출처

2010-04-04 04:52:18 BalusC

행운을 빌어 요, 친구.

http://www.simplesli.de

내가 설정하는 최대한 간단하게하려고 노력했지만, 기본적으로 각 슬라이드에, 당신이 div를 만들 수 있습니다 : 난 그냥 어제 바로이 일을 새로운 jQuery 플러그인을 발표 네가 좋아하는 어떤 방식 으로든. 행운을 빌어 요!

출처

2010-04-06 20:03:29 dclowd9901

답변이 죽었습니다. – Pang

CSS와 jQuery로 눈에 거슬리지 않는 수평 스크롤

답변

관련 문제