html实现滑动解锁_js滑动解锁(原创)

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;

}

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150566.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • printwriter用法_stylewriter使用教程

    printwriter用法_stylewriter使用教程OutPutStream可以被封装成PrintWriter,OutputStream比较底层一些,是以字节为单位传输的,而PrintWriter是以字符为单位输出,所以就会涉及到转码编码的问题,如果用PrintWriter发送char[]和byte[],在服务端收到的常常是有一些字符会失真.PrintWriter以字符为单位,支持汉字,OutPutStream则不行总结:处理

  • MySQL timestampdiff()函数[通俗易懂]

    MySQL timestampdiff()函数[通俗易懂]下面说明了TIMESTAMPDIFF函数的语法。TIMESTAMPDIFF(unit,begin,end);TIMESTAMPDIFF函数返回begin-end的结果,其中begin和end是DATE或DATETIME表达式。TIMESTAMPDIFF函数允许其参数具有混合类型,例如,begin是DATE值,end可以是DATETIME值。如果使用DATE值,则TIMESTAMPDIFF函…

  • mysql语句截取字符串_sql截取字符串的函数

    mysql语句截取字符串_sql截取字符串的函数今天建视图时,用到了MySQL中的字符串截取,很是方便感觉上MySQL的字符串函数截取字符,比用程序截取(如PHP或JAVA)来得强大,所以在这里做一个记录,希望对大家有用。函数:1、从左开始截取字符串left(str,length)说明:left(被截取字段,截取长度)例:selectleft(content,200)asabstractfrommy_content_t2、从右开始截…

  • JS经常使用正則表達式【分享】

    JS经常使用正則表達式【分享】

  • 大数据Hadoop生态圈各个组件介绍(详情)

    大数据Hadoop生态圈各个组件介绍(详情)Hadoop架构HDFS(HadoopDistributedFIleSystem)分布式文件系统,解决分布式存储MapReduce分布式计算框架TARN分布式资源管理系统在Hadoop2.x中引入Common支持所有其他模块的公共工具程序Hadoop分布式文件系统-HDFS架构HDFS采用master/slave架构master:NameNodeslave:DataNodeHDFS组成角色及其功能Client:客户端NameNode(NN):元数据节点管理文件系统的

  • 关于使用冒泡法_用冒泡法对5个数排序

    关于使用冒泡法_用冒泡法对5个数排序关于使用冒泡法publicclassMain{publicstaticvoidmain(Stringargs[]){intscore[]={89,-23,64,91,119,52,73};Mainm=newMain();m.printScore(score);}public

    2022年10月10日

发表回复

您的电子邮箱地址不会被公开。

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