使用css實現點選切換效果
首先先製作一個容器,用來容納所顯示的內容:
HTML程式碼:
<html></html> <head> <meta charset="utf-8"> <link href="css/test.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="contain"> <ul> <li></li> <li></li> <li>/li> </ul> </div> </body> </html>
CSS程式碼:
.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
}
接下來,根據需要設定ul的長度,這裡先製作三個切換視窗,因此將ul的寬度設定為容器寬度的300%,li即為每次切換時顯示的子元素,寬度設定為顯示容器的100%;
HTML程式碼:
CSS程式碼:<div class="contain"> <ul> <li class="sildeInput-1">one-點選切換</li> <li class="sildeInput-2">two-點選切換</li> <li class="sildeInput-3">three-點選切換</li> </ul> </div>
.contain ul{ margin:10px 0; padding:0; width: 1800px; } .contain li{ float: left; width: 600px; height: 200px; list-style: none; line-height: 200px; font-size: 36px; } .sildeInput-1{ background: #9fa8ef; } .sildeInput-2{ background: #ef9fb1; } .sildeInput-3{ background: #9fefc3; }
效果如下:
可以看到,多出來的部分也被顯示出來了,此時就要給顯示視窗設定overflow:hidden;屬性,將多出來的部分隱藏起來
CSS程式碼:
.contain{overflow: hidden;}
效果如下:
可以看到,多出來的部分全部被隱藏起來了,這樣,我們就可以通過修改ul的margin-left屬性值實現簡單的切換效果。
接下來寫三個單選框用於切換,因為需要實現點選之後才進行切換的效果,此時將lable指向相應的input標籤的id並使用偽類:checked來實現選擇切換的效果。
HTML程式碼:
<div class="contain">
<input type="radio" name="sildeInput" value="0" id="Input1" hidden>
<label class="label1" for="Input1">1</label>
<input type="radio" name="sildeInput" value="1" id="Input2" hidden>
<label class="label2" for="Input2">2</label>
<input type="radio" name="sildeInput" value="1" id="Input3" hidden>
<label class="label3" for="Input3">3</label>
<ul>
<li class="sildeInput-1">one-點選切換</li>
<li class="sildeInput-2">two-點選切換</li>
<li class="sildeInput-3">three-點選切換</li>
</ul>
</div>
CSS程式碼
.label1{
position: absolute;
bottom: 10px;
left: 0px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label2{
position: absolute;
bottom: 10px;
left: 30px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label3{
position: absolute;
bottom: 10px;
left: 60px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
#Input1:checked~ul{ margin-left: 0;}/*第一張點選切換*/
#Input1:checked~.label1{ background: #535353;}/*點選後改變單選框顏色*/
#Input2:checked~ul{ margin-left: -600px;}/*第二張點選切換*/
#Input2:checked~.label2{ background: #535353;}/*點選後改變單選框顏色*/
#Input3:checked~ul{ margin-left: -1200px;}/*第三張點選切換*/
#Input3:checked~.label3{ background: #535353;}/*點選後改變單選框顏色*/
效果如下:
最後,再給ul標籤新增transition:all 0.5s;屬性,設定0.5秒的平滑過渡
css程式碼:
.contain ul{transition:all 0.5s;}
這樣,就可以實現頁面的平滑切換了。
相關推薦
使用css實現點選切換效果
首先先製作一個容器,用來容納所顯示的內容: HTML程式碼: <html></html> <head> <meta charset="utf-8"
純html+css實現點選切換tab頁
核心內容是使用單選框實現css的點選事件 大致分析一下dom結構,被切換的tab頁和按鈕放在同一個li內 一共需要切換三個頁面,也就是說需要有三個li,首先寫一下基本dom結構 一、基礎結構 我使用的是VScode的軟體,可以使用快捷建立dom,就像使用css選擇器一樣的使用
用js給div繫結事件,實現點選切換效果的幾種方式總結
用js給div繫結事件,實現點選切換效果,總結有如下幾種方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementBy
純css實現點選切換樣式
原理: 利用 a偽類選擇器,focus。(獲得焦點設定樣式,失去焦點恢復樣式)注意: active 和 focus的區別,active是點選 a標籤時(從滑鼠按下開始 到滑鼠擡起結束。) focus是獲得焦點,與失去焦點時觸發相應的樣式示例demo: <s
原生js實現滑鼠點選切換效果
今天之所以寫一篇關於js的程式碼實現,一方面是因為個人習慣用jquery編寫程式碼,另一方面是因為github這個大平臺拋棄了jquery。 Jquery是一個js庫,極大簡化js程式設計,使用方便,相容性好,這篇文章就以一個例子來說明jq和js的編寫差別。 首先我們看一下效果圖:
Fragment+RadioButton實現點選切換頁面效果
首先,我們需要在主佈局檔案中activity_main.xml 放一個 容器,方便讓fragment加入進去,底部導航欄使用RedioButton切換頁面,每一個RadioButton都使用了選擇器進行圖片與字型的變化。 &nb
H5 分幀(frameset) 使用分幀寫一個頁面,可以實現點選聯動效果
需要兩個檔案: 檔案3.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"
Android 設定主題實現點選波紋效果
開頭先說說大家都知道的Material Design。 這裡推薦大苞米的系列部落格,介紹的很全面。 http://blog.csdn.net/a396901990/article/category/2634371 Material Design: &
js+css實現點選按鈕水波紋
.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px;
在Activity上載入Fragment實現點選切換頁面
在Activity上載入Fragment實現點選切換Fragment 沒有ViewPager的幫助,單憑Fragment實現滑動比較困難,這裡我就只給大家說一下如何實現點選切換。 首先是xml的佈局: activity_main.xml <Li
通過css實現單選按鈕效果
剛剛入門(可能還沒入門)的小前端,遇見兩次實現單選按鈕的效果,如下:現在總結一下實現這兩種樣式的程式碼。第一種:<form action="#"> <div class=" info "> <div class="radiobox "
js的判斷以及圖片的點選切換效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的簡單練習</title> &
RecyclerView實現點選切換
1.定義全域性的布林值 boolean b=false;//實現通過判斷切換 2.實現三個檢視 <LinearLayout android:id="@+id/li" android:layout_width="match_parent" android:la
HTML+js+css實現點選圖片彈出上傳檔案視窗的兩種思路
第一種:CSS實現 <style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:rel
js實現點選切換文字
點選實現文字的切換,通常用在商品的收藏<p id="btn" onclick="changeVal(this);" >展開</p><script> function changeVal(obj){ var val=documen
使用CSS實現按鈕點選波紋效果
有的網站會為按鈕新增點選波紋效果提升網站效果,我們可以簡單實現一下:主要藉助::after偽類及CSS3中的transform和transition屬性: html:<div class="container text-center"> &l
使用:target實現點選按鈕切換圖片的功能(純CSS)
今天使用CSS中的:target選擇器來實現點選按鈕切換相對應的圖片的demo,此demo也可以使用JS來實現。 demo的結構: <a href="#img1">img
jQuery實現兩個CSS樣式之間的點選切換
指定CSS樣式之間的點選切換 jQuery實現兩個指定樣式的點選切換的效果: 程式碼如下: html程式碼: <div class="green"></div> CSS程式碼
css實現的輪播和點選切換(無js版)
https://github.com/lingxuanHuang/carousel-noJS .slide{ position: relative; margin:auto; width: 600px; height: 200px;
android中listview的item點選切換實現效果(選擇器selector)
public class V2_Adapter_TarentoCreateActivity_OverSea_City extends BaseAdapter{private V2_TarentoCreateActivity_OverSea_Place v2_TarentoCreateActivity_Over