[回到版面][▼底部]
回應模式
名 稱
E-mail
標 題
內 文
附加圖檔[] []
刪除用密碼(刪除文章用。英數字8字元以內)
驗證碼
  • 可附加檔案類型:GIF, JPG, PNG, BMP, SWF;大小限制:3072 KB。
  • 當回文時E-mail填入sage為不推文功能。
  • 發文間隔時間為 30 秒;貼圖間隔時間為 30 秒。
  • 目前附加圖檔使用量大小: 20823 KB / 1313072 KB


0

Page transition (scroll) 無名 ID:/ys2ZQVENo.1380回報推文
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

想做到類似這款效果,
但是內容不是圖片,
而是幾段文字,

我自己試寫了一段

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">

<style>
.container{
width:800px;
min-height:315px;
margin:0 auto;
position:relative;
overflow:hidden;
}

input[type="radio"] {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}

label{
display:block;
width:50px;
border: 1px solid white;
position:absolute;
bottom:5px;
cursor: pointer;
transition: border-color 0.3s linear;
}

label.second{
left:100px;
}
label.third{
left:200px;
}

.slide{
position:absolute;
left:-100%;
opacity:0;
transition: all 0.3s ease-in;
}

#first:checked ~ label.first {
border-width:1px;
border-color:#DB532B;
}
#second:checked ~ label.second {
border-width:1px; border-color:purple;
}
#third:checked ~ label.third {
border:1px solid #54885F;
}

#first:checked ~ div.one {
left:0;
opacity:1;
}
#second:checked ~ div.two {
left:0;
opacity:1;
}
#third:checked ~ div.three {
left:0;
opacity:1;
}
</style>

</head>
<body>

<div class="container">

<input type="radio" name="nav" id="first" checked/>
<input type="radio" name="nav" id="second" />
<input type="radio" name="nav" id="third" />

<label for="first" class="first">1</label>
<label for="second" class="second">2</label>
<label for="third" class="third">3</label>

<div class="one slide" style="background-color:red">
<p>111111111111111111111111111111111111111111111111111111111111111111111111</p><p>1111</p>
</div>

<div class="two slide" style="background-color:blue">
<p>222222222222222222222222222222222222222222222222222222222222222222222222</p><p>1111</p>
</div>

<div class="three slide" style="background-color:yellow">
<p>333333333333333333333333333333333333333333333333333333333333333333333333</p><p>1111</p>
</div>

</div>

</body>
</html>

這段問題是button只能置底,
我想做成在上面,
而button之間的間隔只能根據最左邊那個的位置加數上去,
有沒有辦法做成計算button之間的距離?
scroll transition想做成A左出B在右邊入,
而不是現在左出左入,

其實這個例子比較接近我理想中的效果,
http://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp
不過入面的button無法移到div之外,

有沒有一個更好的方法,可以做到:

(按鈕) [第一版][第二版][第三版]
(上面按鈕控制下面div轉版) <div>文字內容

這樣?
謝謝大家!
無標題 無名 ID:/ys2ZQVENo.1381回報推文

又嘗試修改成這樣,
不過有辦法將button置頂嗎?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script&gt;
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script&gt;
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>

<div>
<!-- Indicators -->
<ol class="carousel-indicators">
<span data-target="#myCarousel" data-slide-to="0" class="active" style="padding:5px 5px 5px 5px">1月</span>
<span data-target="#myCarousel" data-slide-to="1" style="padding:5px 5px 5px 5px">2月</span>
<span data-target="#myCarousel" data-slide-to="2" style="padding:5px 5px 5px 5px">3月</span>
<span data-target="#myCarousel" data-slide-to="3" style="padding:5px 5px 5px 5px">4月</span>
</ol>
</div>

<div class="container">
<div id="myCarousel" class="carousel slide">

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>

<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>

<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>

<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>

</div>
</div>

</body>
</html>



0
【刪除文章】[]
刪除用密碼: