js写的滑动解锁
css部分
*{
margin:;
padding:;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.outer{
position: relative;
margin:20px auto;
width: 200px;
height: 30px;
line-height: 28px;
border:1px solid #ccc;
background: #ccc9c9;
}
.outer span,.filter-box,.inner{
position: absolute;
top:;
left:;
}
.outer span{
display: block;
padding:0 0 0 36px;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.filter-box{
width:;
height: 100%;
background: green;
z-index:;
}
.outer.act span{
padding:0 36px 0 0;
}
.inner{
width: 36px;
height: 28px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index:;
font-weight: bold;
color: #929292;
cursor: move;
}
.outer.act .inner{
color: green;
}
.outer.act span{
z-index:;
}
html部分
<div class="outer" id="outer">
<div class="filter-box"></div>
<span id="span">
滑动解锁
</span>
<div class="inner" id="inner">>></div>
</div>
js部分
var inner=document.getElementById('inner');
var outer=document.getElementById('outer');
var span=document.getElementById('span');
var left;
var dx=outer.offsetWidth-inner.offsetWidth;//能移动的最大距离
inner.onmousedown=function(event){//鼠标按下
var event=window.event||ev;
left=event.clientX-inner.offsetLeft;//鼠标按下时的位置
document.onmousemove=function(event){//鼠标移动
var event = window.event||ev;
lefta=event.clientX-left;//鼠标移动的距离
console.log(dx,lefta);
if(lefta<0){
lefta=0;
}else if(dx<lefta){
lefta=dx; }
inner.style.left=lefta+'px'; }
document.onmouseup = function(event){//鼠标抬起
var event = window.event||ev;
document.onmousemove = null;
document.onmouseup = null; lefta=event.clientX-left;
if(lefta<0){
lefta=0;
span.innerHTML='滑动解锁'; }else if(dx<lefta){
lefta=dx;
span.innerHTML='解锁成功';
inner.innerHTML='√';
inner.onmousedown=null; }else{
lefta=0;
}
inner.style.left=lefta+'px'; };
}
js写的滑动解锁的更多相关文章
- js实现图片滑动显示效果
js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- jq实现简单的滑动解锁效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- APP九宫格滑动解锁的处理
写手机自动化测试脚本关于APP九宫格滑动解锁方面采用了appium API 之 TouchAction 操作. 先是用uiautomatorviewer.bat查询APP元素坐标: 手工计算九宫格每个 ...
- js 简单的滑动3
js 简单的滑动教程(三) 作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...
- selenium+python自动化102-登录页面滑动解锁(ActionChains)
前言 登录页面会遇到滑动解锁,滑动解锁的目的就是为了防止别人用代码登录(也就是为了防止你自动化登录),有些滑动解锁是需要去拼图这种会难一点. 有些直接拖到最最右侧就可以了,本篇讲下使用 seleniu ...
- Node.js写文件的三种方法
Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
- 用JS写了一个打字游戏,反正我是通不了关
今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...
- JS写小游戏(一):游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
随机推荐
- springmvc:配置解决中文乱码的过滤器
在web.xml中配置以下内容: <!--配置解决中文乱码过滤器--> <filter> <filter-name>characterEncodingFilter& ...
- Ubuntu修改mysql编码格式
今天在Ubuntu系统上部署了第一个net core的web网站,遇到了mysql入库数据乱码的情况.无奈,ubuntu系统不熟悉,mysql命令不熟悉,只得在网上查找各种资料.还是老规矩,主要参考的 ...
- c++新特性实验(3)声明与定义:constexpr
1.作用 constexpr 声明一个函数或变量,它的值可以在编译时出现在常量表达式之中. 2.constexpr 变量要求 其类型必须是 字面类型 (LiteralType) . 它必须被立即初始化 ...
- AT2164 Rabbit Exercise
传送门 解题思路 首先考虑k=1的情况,对于每一个a[i],它可能会到a[i-1]*2-a[i] 与 a[i+1]*2-a[i]两个位置,概率都为%50,那么它的期望位置为 (a[i-1]*2-a[i ...
- beanstalkd 消息队列发邮件
放入消息 /** * 获取beanstalk实例 * * @staticvar resource|bool $beanstalk * @return resource */ function get_ ...
- ajax--表单带file数据提交报错Uncaught TypeError: Illegal invocation
只要设置 contentType: false, //不设置内容类型 processData: false, //不处理数据 $("#btn").on("click&qu ...
- selenium自动化方式爬取豆瓣热门电影
爬取的代码如下: from selenium import webdriver from bs4 import BeautifulSoup import time #发送请求,获取响应 def get ...
- php 该如何获取从百度搜索进入网站的关键词
清源分享一个php获取从百度搜索进入网站的关键词的代码,有需要的朋友可以参考一下:https://blog.csdn.net/u012275531/article/details/17609065 代 ...
- 【JZOJ5363】【NOIP2017提高A组模拟9.14】生命之树 Trie+启发式合并
题面 45 在比赛中,我只想到了45分的暴力. 对于一个树中点对,相当于在他们的LCA及其祖先加上这个点对的贡献. 那么这个可以用dfs序+树状数组来维护. 100 想法 我想到了可能要用trie树来 ...
- Django REST Framework之认证组件
什么是认证 认证即需要知道是谁在访问服务器,需要有一个合法身份.认证的方式可以有很多种,例如session+cookie.token等,这里以token为例.如果请求中没有token,我们认为这是未登 ...