整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文使用html、css、javascript實現一個水平滑動選擇框，實際效果見下圖，水平方向的三個選項可以實現動態的滑動選擇，當你理解了其中的實現方式后，你就可以實現自己的版本，滑動選項的多少可以自由定義，不是必須三個。
整個的實現主要使用CSS，只需要一點點JavaScript代碼，用來響應用戶的鼠標點擊事件。
首先，使用使用css flex布局實現一個水平排列選項列表，共包含三個選項，flex-container的justify-content設置為space-around使每個選項呈現在各自選項中居中的效果。另外設置flex-container寬度為24px，那么每個選項的寬度就是8px，還要設置flex-container的position為相對定位，這兩個設置的作用在下面進行說明。
接下來，在flex-container內再添加一個flex-item，該flex-item的position屬性設置為絕對定位，寬度為flex-container為33.33%，也就是8px，是一個選項的寬度，背景色為白色，將它疊加到某個選項上面實現選中的效果。為了實現選項切換的動畫效果，使用了css的transform和transition屬性，transform用來設置水平方向的移動距離，移動距離為8px的倍數，這樣看起來就是在選項之間切換，transition用來設置過度的快慢。
這里需要特別說明的是，當把某個元素設置為絕對定位時，它并不是相對于整個body進行定位的，而是相對于最近的父級相對定位元素來定位，這也是把flex-container設置為相對定位的原因。
最后，寫一點JavaScript代碼來處理鼠標響應事件，用戶使用鼠標點擊某個選項時，就會為某個選項添加選中的class名，css特性就會觸發相應的動畫，實現選中的效果。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./slide.css">
<title>slidemenu</title>
</head>
<body>
<h1>水平滑動選擇框示例</h1>
<div class="row">
<div class="menu left" id="slide-menu">
<div class="menu-item menu-item-left">選項A</div>
<div class="menu-item menu-item-center">選項B</div>
<div class="menu-item menu-item-right">選項C</div>
<div class="menu-item-toggle-handle"></div>
</div>
</div>
<script src="./slide.js"></script>
</body>
</html>css：
body {
padding: 0;
margin: 0;
}
.row {
background-color: #f76820;
}
.row {
display: flex;
justify-content: center;
padding: 0.5rem 0;
}
.row .menu {
display: flex;
position: relative;
height: 2.25rem;
flex-wrap: nowrap;
width: 24rem;
justify-content: space-around;
align-items: center;
background: rgba(52,73,94,.4)!important;
border: 3px solid rgba(52,73,94,.2);
border-radius: .2rem;
}
.menu .menu-item {
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
color: white;
cursor: pointer;
z-index: 1;
}
.menu.left .menu-item-left, .menu.center .menu-item-center, .menu.right .menu-item-right {
color: #f76820 !important;
}
.menu .menu-item-toggle-handle {
width: 33.33%;
height: 2.2rem;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 0;
transform: translateX(0);
transition: transform .3s;
}
.menu.center .menu-item-toggle-handle {
transform: translateX(8rem);
}
.menu.right .menu-item-toggle-handle {
transform: translateX(16rem);
}JavaScript：
HTML+CSS3+JS創意設計——打造炫酷滑動登錄頁面
**引言：探索交互之美**
在Web開發的世界里，優秀的用戶體驗往往始于一個精心設計的登錄界面。HTML5、CSS3以及JavaScript的結合讓我們能夠創造出極具創意與個性化的滑動登錄頁面，讓用戶在首次接觸應用時就能留下深刻印象。本篇文章將詳細介紹如何利用基礎的HTML+CSS3+JS技術，從零開始打造一款令人眼前一亮的滑動登錄頁面，并通過詳細的代碼實例解析，帶領您領略前端交互設計的魅力。
---
### **一、搭建基礎HTML結構**
**標題：** 構建骨骼——登錄表單的基礎布局
首先，我們需要構建一個簡潔明了的HTML結構，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊鏈接。為了實現滑動效果，我們還將引入一個容器元素來包裹整個登錄區域。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>滑動登錄頁面</title>
<!-- 引入外部CSS和JS文件 -->
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<div id="login-slider">
<form action="#" class="login-form">
<input type="text" placeholder="用戶名" required>
<input type="password" placeholder="密碼" required>
<button type="submit">登錄</button>
<a href="#">忘記密碼？</a>
<a href="#">立即注冊</a>
</form>
</div>
</body>
</html>
```
---
### **二、CSS3魔法——樣式與動畫**
**標題：** 點綴肌膚——賦予登錄表單靈動之感
接下來，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規則定義滑動動畫效果。同時，我們還需要保證登錄表單在不同設備上具有良好的響應式布局。
```css
/* styles.css */
body {
margin: 0;
background-color: #f0f0f0;
}
#login-slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: auto;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.login-form {
display: flex;
flex-direction: column;
padding: 20px;
animation: slideIn 1s ease-in-out forwards;
}
/* 定義滑動動畫 */
@keyframes slideIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
/* 登錄表單元素樣式 */
input[type="text"],
input[type="password"] {
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
}
button {
cursor: pointer;
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
}
/* 響應式布局 */
@media screen and (max-width: 768px) {
#login-slider {
width: 90%;
}
}
```
---
### **三、JavaScript增強交互**
**標題：** 賦予靈魂——用JavaScript實現滑動觸發與驗證邏輯
現在我們要借助JavaScript來控制登錄表單的滑動行為，例如當用戶點擊某個鏈接或者頁面加載完成后自動觸發滑動動畫。同時，可以增加一些簡單的表單驗證功能。
```javascript
// scripts.js
document.addEventListener('DOMContentLoaded', () => {
// 頁面加載完成后執行滑動動畫
const loginSlider = document.getElementById('login-slider');
loginSlider.classList.add('slide-active');
// 表單提交事件處理，此處僅為示例，實際場景下需加入真實驗證邏輯
const form = document.querySelector('.login-form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默認提交行為
const username = form.querySelector('input[type="text"]').value;
const password = form.querySelector('input[type="password"]').value;
// 實現簡單驗證邏輯，如為空檢查
if (!username || !password) {
alert('用戶名和密碼不能為空!');
} else {
// 這里可以替換為真實的登錄請求邏輯
console.log('正在登錄...', username, password);
}
});
});
```
---
### **四、創意無限——拓展與優化**
**標題：** 持續創新——更多滑動登錄頁面的設計思路與實踐
除了上述基本的滑動登錄形式，還可以進一步豐富設計，比如：
- 添加進度條指示登錄滑動完成度；
- 使用CSS變量實現自定義主題切換；
- 結合SVG圖標增加視覺吸引力；
- 通過IntersectionObserver API實現視口可見時自動滑動；
- 配合AJAX技術實現實時驗證和無刷新登錄。
---
**結語：**
通過這次對HTML+CSS3+JS組合技術的探索，我們不僅成功地制作出了一個富有創意的滑動登錄頁面，還展現了前端技術在交互設計中的無限可能性。學習并靈活運用這些基礎知識，可以讓您的Web應用更加生動有趣，從而更好地吸引和留住用戶。持續關注前端技術的最新發展，不斷挑戰自我，用代碼書寫更美好的Web世界。
個容器元素包含側邊菜單和主要內容。通過把主要內容區域從一邊拖動到另一邊，來讓左側或右側的側欄菜單進行切換。
效果圖如下所示：
用法
要使用側欄菜單，添加一個父元素<ion-side-menus>，一個中間內容 <ion-side-menu-content>，和一個或更多 <ion-side-menu> 指令。
<ion-side-menus> <!-- 中間內容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左側菜單 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右側菜單 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}嘗試一下 ?
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| enable-menu-with-back-views (可選) | 布爾值 | 在返回按鈕顯示時，確認是否啟用側邊欄菜單。 |
| delegate-handle | 字符串 | 該句柄用于標識帶有$ionicScrollDelegate的滾動視圖。 |
ion-side-menu-content
一個可見主體內容的容器，同級的一個或多個ionSideMenu 指令。
用法
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| drag-content (可選) | 布爾值 | 內容是否可被拖動。默認為true。 |
ion-side-menu
一個側欄菜單的容器，同級的一個ion-side-menu-content 指令。
用法
<ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| side | 字符串 | 側欄菜單當前在哪一邊。可選的值有: 'left' 或 'right'。 |
| is-enabled (可選) | 布爾值 | 該側欄菜單是否可用。 |
| width (可選) | 數值 | 側欄菜單應該有多少像素的寬度。默認為275。 |
menu-toggle
在一個指定的側欄中切換菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
menu-close
關閉當前打開的側欄菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<a menu-close href="#/home" class="item">首頁</a>
$ionicSideMenuDelegate
該方法直接觸發$ionicSideMenuDelegate服務，來控制所有側欄菜單。用$getByHandle方法控制特定情況下的ionSideMenus。
用法
<body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> 內容! <button ng-click="toggleLeftSideMenu()"> 切換左側側欄菜單 </button> </ion-side-menu-content> <ion-side-menu side="left"> 左側菜單! <ion-side-menu> </ion-side-menus> </body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}方法
toggleLeft([isOpen])
切換左側側欄菜單（如果存在）。
| 參數 | 類型 | 詳情 |
|---|---|---|
| isOpen (可選) | 布爾值 | 是否打開或關閉菜單。默認：切換菜單。 |
toggleRight([isOpen])
切換右側側欄菜單（如果存在）。
| 參數 | 類型 | 詳情 |
|---|---|---|
| isOpen (可選) | 布爾值 | 是否打開或關閉菜單。默認：切換菜單。 |
getOpenRatio()
獲取打開菜單內容超出菜單寬度的比例。比如，一個寬度為100px的菜單被寬度為50px以50%的比例打開，將會返回一個比例值為0.5。
返回值: 浮點 0 表示沒被打開，如果左側菜單處于已打開或正在打開為0 到 1，如果右側菜單處于已打開或正在打開為0 到-1。
isOpen()
返回值: 布爾值，判斷左側或右側菜單是否已經打開。
isOpenLeft()
返回值: 布爾值左側菜單是否已經打開。
isOpenRight()
返回值: 布爾值右側菜單是否已經打開。
canDragContent([canDrag])
| 參數 | 類型 | 詳情 |
|---|---|---|
| canDrag (可選) | 布爾值 | 設置是否可以拖動內容打開側欄菜單。 |
返回值: 布爾值，是否可以拖動內容打開側欄菜單。
$getByHandle(handle)
| 參數 | 類型 | 詳情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();ion-slide-box
滑動框是一個包含多頁容器的組件，每頁滑動或拖動切換：
效果圖如下：
用法
<ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide></ion-slide-box>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle (可選) | 字符串 | 該句柄用 |
| does-continue (可選) | 布爾值 | 滑動框是否開啟循環滾動。 |
| auto-play (可選) | boolean | 設置滑動框是否循環博客，如果 does-continue 為 true，默認也為 true。 |
| slide-interval (可選) | 數字 | 等待多少毫秒開始滑動（如果繼續則為true）。默認為4000。 |
| show-pager (可選) | 布爾值 | 滑動框的頁面是否顯示。 |
| pager-click (可選) | 表達式 | 當點擊頁面時，觸發該表達式（如果shou-pager為true）。傳遞一個'索引'變量。 |
| on-slide-changed (可選) | 表達式 | 當滑動時，觸發該表達式。傳遞一個'索引'變量。 |
| active-slide (可選) | 表達式 | 將模型綁定到當前滑動框。 |
實例
HTML 代碼
<ion-slide-box active-slide="myActiveSlide"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide></ion-slide-box>
CSS 代碼
.slider {
height: 100%;}.slider-slide {
color: #000;
background-color: #fff; text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }.blue {
background-color: blue;}.yellow {
background-color: yellow;}.pink {
background-color: pink;}.box{
height:100%; } .box h1{
position:relative; top:50%; transform:translateY(-50%); }JavaScript 代碼
angular.module('ionicApp', ['ionic']).controller('SlideController', function($scope) {
$scope.myActiveSlide = 1;
})ion-spinner
ionSpinner 提供了許多種旋轉加載的動畫圖標。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。
該圖標采用的是SVG。
用法
<ion-spinner icon="spiral"></ion-spinner> //默認用法
像大部分其他的ionic組件一樣，spinner也可以使用ionic的標準顏色命名規則，就像下面這樣：
<ion-spinner class="spinner-energized"></ion-spinner>
實例
HTML 代碼
<ion-content scroll="false" class="has-header"> <p> <ion-spinner icon="android"></ion-spinner> <ion-spinner icon="ios"></ion-spinner> <ion-spinner icon="ios-small"></ion-spinner> <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner> <ion-spinner icon="circles" class="spinner-energized"></ion-spinner> </p> <p> <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner> <ion-spinner icon="dots" class="spinner-dark"></ion-spinner> <ion-spinner icon="lines" class="spinner-calm"></ion-spinner> <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner> <ion-spinner icon="spiral"></ion-spinner> </p> </ion-content>
CSS 代碼
body {
cursor: url('http://www.runob.com/try/demo_source/finger.png'), auto;
}
p {
text-align: center;
margin-bottom: 40px !important;
}
.spinner svg {
width: 19% !important;
height: 85px !important;
}JavaScript 代碼
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});ion-tabs
ion-tabs 是有一組頁面選項卡組成的選項卡欄。可以通過點擊選項來切換頁面。
對于 iOS，它會出現在屏幕的底部，Android會出現在屏幕的頂部(導航欄下面)。
用法
實例
<ion-tabsclass="tabs-positive tabs-icon-only"><ion-tabtitle="首頁"icon-on="ion-ios-filing"icon-off="ion-ios-filing-outline"><!-- 標簽 1 內容 --></ion-tab><ion-tabtitle="關于"icon-on="ion-ios-clock"icon-off="ion-ios-clock-outline"><!-- 標簽 2 內容 --></ion-tab><ion-tabtitle="設置"icon-on="ion-ios-gear"icon-off="ion-ios-gear-outline"><!-- 標簽 3 內容 --></ion-tab></ion-tabs>
嘗試一下 ?
效果如下所示：
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle (可選) | 字符串 | 該句柄用 |
ion-tab
隸屬于ionTabs
包含一個選項卡內容。該內容僅存在于被選中的給定選項卡中。
每個ionTab都有自己的瀏覽歷史。
用法
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"></ion-tab>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| title | 字符串 | 選項卡的標題。 |
| href (可選) | 字符串 | 但觸碰的時候，該選項卡將會跳轉的的鏈接。 |
| icon (可選) | 字符串 | 選項卡的圖標。如果給定值，它將成為ion-on和ion-off的默認值。 |
| icon-on (可選) | 字符串 | 被選中標簽的圖標。 |
| icon-off (可選) | 字符串 | 沒被選中標簽的圖標。 |
| badge (可選) | 表達式 | 選項卡上的徽章（通常是一個數字）。 |
| badge-style (可選) | 表達式 | 選項卡上微章的樣式（例，tabs-positive ）。 |
| on-select (可選) | 表達式 | 選項卡被選中時觸發。 |
| on-deselect (可選) | 表達式 | 選項卡取消選中時觸發。 |
| ng-click (可選) | 表達式 | 通常，點擊時選項卡會被選中。如果設置了 ng-Click，它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標簽。 |
$ionicTabsDelegate
授權控制ionTabs指令。
該方法直接調用$ionicTabsDelegate服務，控制所有ionTabs指令。用$getByHandle方法控制具體的ionTabs實例。
用法
<body ng-controller="MyCtrl"> <ion-tabs> <ion-tab title="Tab 1"> 你好，標簽1！ <button ng-click="selectTabWithIndex(1)">選擇標簽2</button> </ion-tab> <ion-tab title="Tab 2">你好標簽2！</ion-tab> </ion-tabs></body>
function MyCtrl($scope, $ionicTabsDelegate) {
$scope.selectTabWithIndex = function(index) {
$ionicTabsDelegate.select(index);
}}方法
select(index, [shouldChangeHistory])
選擇標簽來匹配給定的索引。
| 參數 | 類型 | 詳情 |
|---|---|---|
| index | 數值 | 選擇標簽的索引。 |
| shouldChangeHistory (可選) | 布爾值 | 此選項是否應該加載這個標簽的瀏覽歷史（如果存在），并使用，或僅加載默認頁面。默認為false。提示：如果一個 |
selectedIndex()
返回值: 數值, 被選中標簽的索引，如 -1。
$getByHandle(handle)
| 參數 | 類型 | 詳情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);*請認真填寫需求信息，我們會在24小時內與您取得聯系。
