html欄目邊框過渡動(dòng)畫小效果

天就來分享一些網(wǎng)頁中會(huì)用到的展示的小效果

很多欄目的邊框當(dāng)鼠標(biāo)移上去的時(shí)候，邊框會(huì)有移動(dòng)的色澤變化，有順時(shí)針過渡或者逆時(shí)針過渡的效果

下面看看效果：

實(shí)現(xiàn)代碼：

一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：?jiǎn)芜x框、復(fù)選框、下拉框。

（1）單選框和復(fù)選框

在我們表單頁面中，經(jīng)常會(huì)有選擇性別或者選擇愛好這類的內(nèi)容，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

使用語法：

單選框：<input type="radio" value="值" name="名稱" checked="checked"/>

復(fù)選框：<input type="checkbox" value="值" name="名稱" checked="checked"/>

詳細(xì)講解：

1、type: 當(dāng) type="radio" 時(shí)，控件為單選框；當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

3、name：為控件命名，這里要注意同一組的單選按鈕，name 取值一定要一致（具體可見下邊的參考練習(xí)）。

4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡(jiǎn)寫成checked）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含姓別（男、女）選擇的單選框，默認(rèn)選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認(rèn)選中唱歌。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

（2）下拉框

下拉框也是我們常用的一個(gè)表單控件，多用于選擇城市地區(qū)等。

使用語法：

<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>

</select>

詳細(xì)講解：

1、option：option為select下拉子元素，可以有一個(gè)或多個(gè)，寫法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡(jiǎn)寫成selected）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含一個(gè)城市的下拉框，下拉框中有北京、上海、天津這三個(gè)城市，其中默認(rèn)選中天津。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

好了，本篇文章就先給大家介紹這幾個(gè)表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示，記得平時(shí)要多加練習(xí)才是王道。

每日金句：做人要像竹子一樣每前進(jìn)一步，都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

紹

sweetalert2是一個(gè)漂亮的、響應(yīng)式、可定制的替代JAVASCRIPT原生的彈出框插件。sweetalert2相比sweetalert更加強(qiáng)大,但它不是sweetalert的擴(kuò)展，它是一個(gè)全新的插件，且支持三大流行前端框架React、Vue、Angular。

Github和官網(wǎng)

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安裝

提供了很多安裝方式

使用npm安裝

npm install --save sweetalert2

使用cdn

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

注意：如果想要兼容IE11，還得引入polyfill.js

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

模塊化用法

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')

示例

最基本的信息彈出框

Swal.fire('基本信息彈框')

標(biāo)題下包含文字

Swal.fire(
 '標(biāo)題下有文字',
 '標(biāo)題下的文字?',
 'question'
 )

底部文字

Swal.fire({
 type: 'error',
 title: '標(biāo)題',
 text: '出錯(cuò)啦！',
 footer: '<a href>為什么會(huì)出錯(cuò)?</a>'
 })

自定義html

Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定義的html<a ,
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起來不錯(cuò)',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

自定義彈框的位置

Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

函數(shù)回調(diào)

Swal.fire({
 title: '確定要?jiǎng)h除么?',
 text: "刪除后將無法撤銷!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '確定',
 cancelButtonText:'取消'
 }).then((result) => {
 if (result.value) {
 Swal.fire(
 '刪除成功!',
 '文件已被刪除',
 'success'
 )
 }
 })

自定義圖片，禁止動(dòng)畫

Swal.fire({
 title: '標(biāo)題',
 text: '自定義圖片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

自定義寬度、邊框和背景

Swal.fire({
 title: '自定義寬度、邊框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

自定義關(guān)閉（自動(dòng)關(guān)閉）

let timerInterval
Swal.fire({
 title: '自動(dòng)關(guān)閉的彈框!',
 html: '我會(huì)在<strong></strong> 秒后關(guān)閉.',
 timer: 2000,
 onBeforeOpen: () => {
 Swal.showLoading()
 timerInterval = setInterval(() => {
 Swal.getContent().querySelector('strong')
 .textContent = Swal.getTimerLeft()
 }, 100)
 },
 onClose: () => {
 clearInterval(timerInterval)
 }
}).then((result) => {
 if (
 // Read more about handling dismissals
 result.dismiss === Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

異步提交

Swal.fire({
 title: '提交用戶名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login) => {
 return fetch(`//api.github.com/users/${login}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error => {
 Swal.showValidationMessage(
 `請(qǐng)求出錯(cuò): ${error}`
 )
 })
 },
 allowOutsideClick: () => !Swal.isLoading()
 }).then((result) => {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

三步曲

Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '問題1',
 text: '使用modal很簡(jiǎn)單？'
 },
 '問題2',
 '問題3'
 ]).then((result) => {
 if (result.value) {
 Swal.fire({
 title: '所有問題回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

這里就簡(jiǎn)單介紹這些示例，更多示例詳見官方文檔

彈框類型

success

error

warning

info

question

瀏覽器兼容性

總結(jié)

sweetalert2是原本sweetalert的升級(jí)版，功能更加強(qiáng)大，文檔更加全面，寫法更加先進(jìn)，是Web開發(fā)中常用的插件，當(dāng)然同樣優(yōu)秀的還有很多，比如國產(chǎn)的layer.js也很好用，選擇一個(gè)適合自己的就成，今天的介紹就到這里，希望能對(duì)你有所幫助，如果還有更好的推薦，歡迎到評(píng)論區(qū)留言，謝謝！

在線咨詢

上一篇：可能是最全的Thymeleaf參考手冊(cè)（十三）：文字模板模式
下一篇：什么是瀏覽器指紋？詳解瀏覽器指紋技術(shù)，教你防止瀏覽器指紋識(shí)別

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商