資訊專欄INFORMATION COLUMN
摘要：現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。先上效果手機(jī)端的滑塊效果，做的可能都會(huì)遇到過，下面來一次實(shí)現(xiàn)。
現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生js可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。
先上效果：
手機(jī)端的滑塊效果，做webapp的可能都會(huì)遇到過，下面來一次實(shí)現(xiàn)。
html結(jié)構(gòu)
css代碼：
*{
box-sizing: border-box;
}
.range{
width: 90%;
height: 40px;
position: relative;
margin: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.range:before,.range-bar,.range-text,.range-progress{
position: absolute;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.range:before{
content: "";
display: block;
background-color: #ccc;
width: 100%;
}
.range:before,.range-progress{
height: 2px;
left:0;
}
.range-bar{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color:#ccc ;
}
.range-progress{
background-color:#00b3ee;
}
.range-text{
top:100%;
left:90%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color:#999;
}
js邏輯
/*阻止頁面的默認(rèn)滑動(dòng)*/
window.addEventListener("touchmove",function (e) {
e.preventDefault();
})
var range=$(".range");
var bar=$(".range-bar");
var progress=$(".range-progress");
var text=$(".range-text");
var maxw=range.offsetWidth-bar.offsetWidth;//計(jì)算可滑動(dòng)的最大距離
var rangex=range.offsetLeft;
var half=bar.offsetWidth/2;
bar.addEventListener("touchstart",function (event) {
var left=event.touches[0].pageX-rangex-half;
render(left);
event.preventDefault();
})
range.addEventListener("touchmove",function (event) {
/*計(jì)算滑塊的left距離*/
var left=event.touches[0].pageX-rangex-half;
render(left);
});
range.addEventListener("touchstart",function (event) {
var left=event.touches[0].pageX-rangex-half;
render(left);
})
//顯示位置
function render(value) {
var left=value;
/*判斷l(xiāng)eft距離不能小于0并且不能大于最大寬度*/
if(left<=0){
left=0;
}
if(left>=maxw){
left=maxw;
}
/*顯示滑塊的位置、進(jìn)度條的長(zhǎng)度、進(jìn)度值*/
bar.style.left=left+"px";
progress.style.width=left+"px";
text.innerText=Math.ceil(left/maxw*100)+"%";
}
function $(s) {
return document.querySelector(s)
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50334.html
摘要：現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。先上效果手機(jī)端的滑塊效果，做的可能都會(huì)遇到過，下面來一次實(shí)現(xiàn)。 現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生js可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。 先上效果：showImg(https:...
摘要：現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。先上效果手機(jī)端的滑塊效果，做的可能都會(huì)遇到過，下面來一次實(shí)現(xiàn)。 現(xiàn)在寫前端代碼有各種各樣的框架和庫，輕輕松松就實(shí)現(xiàn)我們要的功能，寫久了，原生js可能會(huì)模糊，為了鞏固，會(huì)陸續(xù)寫一些原生的代碼，今天就從這個(gè)開始。 先上效果：showImg(https:...
摘要：為了加強(qiáng)驗(yàn)證功能，減少的被攻擊。隊(duì)長(zhǎng)要求做一個(gè)支付寶的滑塊驗(yàn)證效果。通過查找大多數(shù)案例都是端展示效果，在手機(jī)端并不能友好展示。原文鏈接仿支付寶滑塊驗(yàn)證碼效果的前端實(shí)現(xiàn)展示效果圖滑塊效果的前端實(shí)現(xiàn)。 為了加強(qiáng)驗(yàn)證功能，減少APP的被攻擊。隊(duì)長(zhǎng)要求做一個(gè)支付寶的滑塊驗(yàn)證效果。除了它外觀和用戶體驗(yàn)上的優(yōu)秀外，它的安全性并未降低，通過對(duì)用戶行為的分析保證了安全校驗(yàn)。 通過查找大多數(shù)案例都是P...
嗨~ 這里是芝麻，今天我們一塊來做一個(gè)滑塊插件。那么啥是滑塊插件呢？滑塊插件能干嘛呢？請(qǐng)看下圖： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有點(diǎn)印象了，沒錯(cuò)，他的最基本的用法就是左右滑動(dòng)，插件使用者只需要寫幾行簡(jiǎn)單的html和js即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單滑動(dòng)效果，不過你完全可以組合各種元素來適應(yīng)不同的場(chǎng)景...
閱讀 1083·2021-11-16 11:45
閱讀 2731·2021-09-27 13:59
閱讀 1327·2021-08-31 09:38
閱讀 3158·2019-08-30 15:52
閱讀 1323·2019-08-29 13:46
閱讀 2095·2019-08-29 11:23
閱讀 1654·2019-08-26 13:47
閱讀 2502·2019-08-26 11:54
