您正在使用 IPV4 [3.238.87.31] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
原生js实现简单滑动解锁功能
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'title滑动解锁/titlestyle.div1{width:200px;height:30px;border:1pxsolid#c......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>滑动解锁</title>

<style>

.div1{

width:200px;

height:30px;

border:1pxsolid#cccccc;

user-select:none;

position:relative;

margin:0auto;

margin-top:300px;

}

.div2{

width:100%;

height:30px;

}

.div3{

position:absolute;

top:0;

left:0;

width:36px;

height:30px;

line-height:30px;

text-align:center;

background:#fff;

cursor:pointer;

font-family:"宋体";

z-index:10;

font-weight:bold;

color:#929292;

/*cursor:move;*/

}

.div4{

position:absolute;

left:0;

top:0;

bottom:0;

right:0;

line-height:30px;

text-align:center;

z-index:-1;

background:#ccc;

}

</style>

</head>

<body>

<!--大盒子-->

<divclass="div1"id='div1'>

<divclass="div2"id='div2'></div>

<spanclass="div3"id='div3'>>></span>

<divclass="div4"id='div4'>滑动解锁</div>

</div>

<script>

//vara=1,b='1'

//console.log(a+b,a-b,a++,b++)

//conststr='console.log(1)';

////replaceAll("\\(.*\\)","");

//constnewStr=str.replace[/console\.log/,'return']

//console.log(newStr)

vardiv1=document.getElementById('div1');

vardiv3=document.getElementById('div3');

vardiv4=document.getElementById('div4');

varleft;

varpx=div1.offsetWidth-div3.offsetWidth

div3.onmousedown=function(event){

varevent=window.event||ev;

left=event.clientX-div3.offsetLeft;//鼠标按下时的位置

console.log(event)

console.log(left)

document.onmousemove=function(event){//鼠标移动

varevent=window.event||ev;

lefta=event.clientX-left;//鼠标移动的距离

console.log(px,lefta);

if(lefta<0){

lefta=0;

}elseif(px<lefta){

lefta=px-2;

}

div3.style.left=lefta+'px';

}

document.onmouseup=function(event){//鼠标抬起

varevent=window.event||ev;

document.onmousemove=null;

document.onmouseup=null;

lefta=event.clientX-left;

if(lefta<0){

lefta=0;

span.innerHTML='滑动解锁';

}elseif(px<lefta){

lefta=px-2;

div4.innerHTML='解锁成功';

div3.innerHTML='√';

div3.onmousedown=null;

alert('成功')

}else{

lefta=0;

}

div3.style.left=lefta+'px';

}

}

</script>

</body>

</html>

版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现表格隔行变色

 

下一篇:jquery实现表格行拖动排序

发布日期:2022/2/23
手机扫二维码直达本页
发布时间:12:07:45
点  击:10
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....