整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

水平滑动选择框实现示例

文使用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();

ionic 滑动框

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

(可选)

字符串

该句柄用$ionicSlideBoxDelegate来标识这个滑动框。

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;
 })

ionic 加载动画

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) {
});

ionic 选项卡栏操作

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

(可选)

字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。

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。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。

selectedIndex()

返回值: 数值, 被选中标签的索引，如 -1。

$getByHandle(handle)
参数类型详情
handle字符串

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);

在线咨询
上一篇：“图片滑动样式”修改HTML教程
下一篇：基于Python的仓库库存管理系统的设计和实现

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 道孚县 洛隆县 郊区 寿宁县 玛多县 庄浪县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服