html实现滑动解锁_js滑动解锁（原创）

全栈程序员-站长 • 2022年6月18日下午10:46 • 未分类 • 阅读 19

html实现滑动解锁_js滑动解锁（原创）varbox=document.querySelector(“#box”);varcontent=document.querySelector(“#content”);varshadow=document.querySelector(“#shadow”);vartip=document.querySelector(“#tip”);varblock=document.q…

大家好，又见面了，我是你们的朋友全栈君。

var box = document.querySelector(“#box”);

var content = document.querySelector(“#content”);

var shadow = document.querySelector(“#shadow”);

var tip = document.querySelector(“#tip”);

var block = document.querySelector(“#block”);

var maxWidth = content.clientWidth – shadow.offsetWidth

var maxHeight = content.clientHeight – shadow.offsetHeight;

var ranX = Math.round(Math.random() * maxWidth);

var ranY = Math.round(Math.random() * maxHeight);

shadow.style.left = ranX + “px”;

shadow.style.top = ranY + “px”;

tip.style.top = ranY + “px”;

tip.style.backgroundPosition = -ranX + “px ” + (-ranY) + “px”;

block.onmousedown = function(e) {

var ev = event || e;

var startX = ev.x;

document.onmousemove = function(e) {

var ev = event || e;

var x = ev.x;

var left = x – startX;

if (left <= 0) {

left = 0;

}

if (left >= maxWidth) {

left = maxWidth;

}

block.style.left = left + “px”;

tip.style.left = left + “px”;

}

}

document.onmouseup = function() {

document.onmousemove = null;

if (Math.abs(tip.offsetLeft – shadow.offsetLeft) <= 2) {

alert(“成功”);

} else {

block.style.left = 0;

tip.style.left = 0;

add();

}

}

function add() {

var ranX = Math.round(Math.random() * maxWidth);

var ranY = Math.round(Math.random() * maxHeight);

shadow.style.left = ranX + “px”;

shadow.style.top = ranY + “px”;

tip.style.top = ranY + “px”;

tip.style.backgroundPosition = -ranX + “px ” + (-ranY) + “px”;

}

window.ondragstart = function() {

return false;

}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150566.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

android布局属性具体解释[通俗易懂]

android布局属性具体解释

全栈程序员-站长
2022年1月31日
43
python对象的不同参数集合「建议收藏」

python对象的不同参数集合

全栈程序员-站长
2022年3月12日
43
matlab的fread函数的用法_matlab fread 大小端

matlab的fread函数的用法_matlab fread 大小端fread函数常见用法：1、A=fread(fileID,sizeA,precision,skip,machinefmt) 2、A=fread(fileID)3、fread(fileID,sizeA)4、A=fread(fileID,sizeA,precision)5、A=fread(fileID,sizeA,precision,skip)6、A=fread(fileID,sizeA,p

全栈程序员-站长
2025年11月10日
4
Razor语法_range语法

Razor语法_range语法本章通过示例来说明常见用途下的Razor语法。1.Razor中的核心转换符号是@。这个单一字符用做标记-代码的转换字符，有时也反过来用作代码-标记的转换字符。这里共有两种基本类型的转换：代码表达式和代码块。求出表达式的值，然后将值写入到响应中。@{stringrootNamespace="MyApp";}<span>@rootNamespace.Models&…

全栈程序员-站长
2025年7月26日
2
IE重新装ActiveX控件[通俗易懂]

IE重新装ActiveX控件[通俗易懂]项目因版本升级，需要重新安装一次已经装过的ActiveX控件，安装步骤如下： IE–>右键属性–》程序–》管理加载项–>IE已经使用的加载项–》找到原来安装的控件–》更新ActiveX（需要事先讲新控件放到相关文件夹）。推荐使用：IE安装好的ActiveX控件存放在C:\WINDOWS\DownloadedProgramFiles，先删除…

全栈程序员-站长
2022年5月14日
45
一阶倒立摆的PID_简单旋转装置

一阶倒立摆的PID_简单旋转装置　　我做PID算法的背景和经历：本人之前电子信息科学与技术专业，对控制方向颇感兴趣，刚上大学时听到实验室老师说PID算法，那年在暑假集训准备全国电子设计竞赛，我正在练习做一个以前专科的题目，帆板角度控制系统，还不懂PID是个什么玩意，老师让我把PID加到这个题目里。当时给了一些电子版的一些教程，但是没看懂。。。。。。。后来对四旋翼很感兴趣，想弄一架玩玩再亲自写程序做一架，买了PIX飞控玩了很久，自…

全栈程序员-站长
2022年8月18日
14

发表回复

关注全栈程序员社区公众号