水平點擊動畫幻燈片

Div與id="content"需要更改內容。我有兩個DIV年代，隨着id=1和id=2地方產生的，而我想的div id="content"表現之一，
但是當我點擊一些按鈕來改變內容的另一個DIV，但流暢的水平的動畫，就像圖片庫向左和向右滾動。如何用jQuery做到這一點？水平點擊動畫幻燈片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <div id="content"> 
     </div> 
    </body> 
</html>

來源

2011-05-25 Almira Bojani

我會玩一下，查看來源，以瞭解如何手動執行此操作。您可以通過檢查啓動這一個：http://css-tricks.com/examples/AnythingSlider/

如果不是有下載和完整的源上如何實現文檔它

來源

2011-05-25 13:03:06 XGreen

這是一個多步驟的過程：

1 /監聽click事件在按鈕上需要點擊以切換內容

2 /點擊可以使用animate函數來滑動您希望從容器div中替換的內容。像

$('#id1').animate({'margin-left':'-=500px'},500)

應該工作。第二個「500」是動畫的速度。

3 /然後，你需要使用相同的功能，你想在展示的內容滑動。

4 /當然，你需要正確的CSS樣式。喜歡的東西：

#content{ 
    width:100px //width of your div 
    height : 100px // height of your div 
    overflow : hidden; 
}

來源

2011-05-25 13:04:34 Jibou

只有CSS-例如based on this SO answer：
它使用了漂亮的幻燈片效果CSS3flex爲模板和transition：

*{box-sizing:border-box;} 
 
html, body{height:100%; margin:0;} 
 
body{ 
 
    font: 16px/1 sans-serif; 
 
    color:#fff; 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: hidden; 
 
} 
 
nav ul{ 
 
    list-style:none; 
 
    padding:0; 
 
    margin:0; 
 
    display: flex; 
 
} 
 
nav ul li{ 
 
    flex: 1; 
 
} 
 
nav ul li a{ 
 
    display: block; 
 
    text-align:center; 
 
    padding:24px; 
 
    background:#0bf; 
 
    color:#fff; 
 
} 
 
#pages{ 
 
    flex-grow: 1; 
 
    display: flex; 
 
    transition: 1s; 
 
} 
 
#pages section{ 
 
    overflow: auto; 
 
    min-width: 100%; 
 
    overflow-y: auto; 
 
    padding: 0 32px; 
 
    font-size: 40px; 
 
} 
 

 
.bg1{background:#0af;} 
 
.bg2{background:#f0a;} 
 
.bg3{background:#0fa;} 
 

 
#home:target ~ #pages{ 
 
    transform: translateX(-0%); 
 
} 
 
#about:target ~ #pages{ 
 
    transform: translateX(-100%); 
 
} 
 
#contact:target ~ #pages{ 
 
    transform: translateX(-200%); 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#home" class="bg1">HOME</a></li> 
 
    <li><a href="#about" class="bg2">ABOUT</a></li> 
 
    <li><a href="#contact" class="bg3">CONTACT</a></li> 
 
    </ul> 
 
</nav> 
 

 
<!-- dummy anchor targets --> 
 
<i class="target" id="home"></i> 
 
<i class="target" id="about"></i> 
 
<i class="target" id="contact"></i> 
 

 
<div id="pages"> 
 
    <section class="bg1"> 
 
    <h1>WELCOME</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus impedit, fugiat nostrum totam possimus perferendis aut explicabo, perspiciatis veritatis dolorem recusandae ut ratione similique magnam ex tenetur qui doloribus.</p> 
 
    </section> 
 
    <section class="bg2"> 
 
    <h1>ABOUT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus praesentium ipsum esse autem quisquam earum accusantium cumque, ipsa ratione saepe sunt voluptatibus fuga perspiciatis reiciendis qui impedit nam itaque incidunt.</p> 
 
    </section> 
 
    <section class="bg3"> 
 
    <h1>CONTACT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum perspiciatis, quae tempore voluptas modi dignissimos asperiores quibusdam adipisci eligendi facilis eos eius corrupti, numquam nulla dolorum, impedit rem fugit rerum?</p> 
 
    </section> 
 
</div>

PS：不要忘記添加所需的傳統-vendor-pref ixes所需的CSS3屬性

來源

2011-05-25 16:29:24

更改div內容的最佳方法是使其內部的子div都可用。

最初做一個display:none;和對一些基礎條件，使其爲display:block;

它完全在Chrome，FF和IE瀏覽器。

來源

2013-11-19 12:18:01

水平點擊動畫幻燈片

回答

相關問題