滑动解锁
模仿手機(jī)解鎖滑動，點(diǎn)擊向右滑動完畢即可顯示解鎖成功。
程序詳解
1.點(diǎn)擊和松開事件
2. 未解鎖之前顯示的樣式和背景色
3. 解鎖之后顯示的樣式和背景色
4. 滑動完畢后才能解鎖
圖片演示
原始界面
點(diǎn)擊滑動后
解鎖成功
下面我們跟隨我一起來欣賞一下代碼
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><!--注：iconfont語法，即矢量圖標(biāo)--><link rel="stylesheet" href="font/iconfont.css"><style>*{padding: 0;margin: 0;}#box{position: relative;width: 300px;height: 40px;margin: 0 auto;margin-top: 10px; background-color: #e8e8e8;box-shadow: 1px 1px 5px rgba(0,0,0,0.2);}.groundcolor{position: absolute;left:0;top:0;width:40px;height: 40px;background-color: lightblue;}.text{position: absolute;width: 100%;height: 40px;line-height: 40px;font-size: 14px;color: #000;text-align: center;}.slider{position: absolute;left:0;top:0;width: 50px;height: 38px;border: 1px solid #ccc;background: #fff;text-align: center;cursor: move;}.slider>i{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}.slider.active>i{color:green;}</style> </head> <body><div id="box" onselectstart="return false;"><div class="groundcolor"></div><div class="text" >滑動解鎖</div><!--添加相應(yīng)字體圖標(biāo)的類名即可--><div class="slider"><i class="iconfont icon-double-right"></i></div></div> <script>//獲取元素function getEle(selector){return document.querySelector(selector);}var box = getEle("#box"),//背景色bgColor = getEle(".groundcolor"),txt = getEle(".text"),slider = getEle(".slider"),icon = getEle(".slider>i"),//滑動的距離successMoveDistance = box.offsetWidth- slider.offsetWidth,downX,//是否解鎖成功isSuccess = false;slider.onmousedown = mousedownHandler;//鼠標(biāo)按下function mousedownHandler(e){bgColor.style.transition = "";slider.style.transition = "";var e = e || window.event || e.which;downX = e.clientX;//鼠標(biāo)按下移動和松開document.onmousemove = mousemoveHandler;document.onmouseup = mouseupHandler;};//移動的距離設(shè)置function getOffsetX(offset,min,max){if(offset < min){offset = min;}else if(offset > max){offset = max;}return offset;}//鼠標(biāo)移動事件function mousemoveHandler(e){var e = e || window.event || e.which;var moveX = e.clientX;var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);bgColor.style.width = offsetX + "px";slider.style.left = offsetX + "px";if(offsetX == successMoveDistance){success();}//滑塊水平滑動e.preventDefault();};//鼠標(biāo)松開事件function mouseupHandler(e){if(!isSuccess){bgColor.style.width = 0 + "px";slider.style.left = 0 + "px";bgColor.style.transition = "width 0.8s linear";slider.style.transition = "left 0.8s linear";}document.onmousemove = null;document.onmouseup = null;};//解鎖成功的方法function success(){isSuccess = true;txt.innerHTML = "解鎖成功";bgColor.style.backgroundColor ="lightgreen";slider.className = "slider active";icon.className = "iconfont icon-xuanzhong";//成功時(shí)，鼠標(biāo)按下事件和鼠標(biāo)移動事件slider.onmousedown = null;document.onmousemove = null;};</script> </body> </html>總結(jié)
- 上一篇： 试图将驱动程序添加到存储区_基于容器的块
- 下一篇： nosql简答什么是最终一致性_可靠消息