<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 100px;
border: 1px solid green;
position: relative;
text-align: center;
line-height: 100px;
/* pointer-events: none; */
}
nav{
width:100px ;
height: 100px;
border: 1px solid black;
line-height: 100px;
text-align: center;
background-color: white;
color: black;
}
div nav:nth-child(2){
position: absolute;
top: 0px;
background-color: green;
z-index: 9991;
opacity: 0.5;
}
div nav:nth-child(1){
position: absolute;
z-index: 9999;
/* font-size: 40px; */
}
div nav:nth-child(3){
width: 1000px;
height: 100px;
position: absolute;
z-index: 999;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<div>
<nav>滑动</nav>
<nav></nav>
<nav>滑动</nav>
</div>
<button>重置</button>
<script>
// 思路
// 一个大的div包括三个nav 三个nav设置绝对定位
// 用到了 事件对象e onmousedown鼠标按下 鼠标弹起 鼠 标移开
// 先获取元素
// 给元素设置事件 写到一个njinio函数里面
// 移动滑块到一定的位置 解除鼠标事件 提示验证成功
// 给button设置一个 重置按钮 重新调用事件
var nav=document.querySelectorAll('nav')[0]
var nav2=document.querySelectorAll('nav')[1]
var nav3=document.querySelectorAll('nav')[2]
var button=document.querySelectorAll('button')[0]
var div=document.querySelector('div')
function njinio(){
nav.onmousedown = function () {
nav.style.transition=null
nav2.style.transition=null
document.onmousemove = function (e) {
var x=e.pageX-50
var y=e.pageY-50
if (x<=0){ //不能超过 div left
x=0
}
if (x>=900){
x=900
// 解除事件
nav.innerText='验证成功'
nav.style.color=' green'
document.onmousemove=null
nav3.innerText='验证通过'
nav.onmouseup=null
nav.onmousedown=null
div.onmouseout=null
console.log('ok');
}
if (y<=0){ //设置滑块不能超过div的 顶部
y=0
}else if (y>=0){ //设置滑块不能超过div的 底部
y=0
}
nav.style.left=x+'px'
nav2.style.width=x+'px'
nav.style.top=y+'px'
}
}
nav.onmouseup = function () {
nav.style.transition='0.5s'
nav2.style.transition='0.5s'
nav.style.left=0+'px'
nav2.style.width=0+'px'
nav.innerText='滑动'
nav.style.color="black"
document.onmousemove=null //删除鼠标移动事件
}
div.onmouseout = function (){
nav.style.transition='0.5s'
nav2.style.transition='0.5s'
nav.style.left=0+'px'
nav2.style.width=0+'px'
document.onmousemove=null // //删除鼠标移动事件
}
}
njinio()
button.onclick = function () {
nav.style.left=0+'px'
nav2.style.width=0+'px'
nav.innerText='滑动'
nav3.innerText='滑动'
nav.style.color="black"
njinio()
}
</script>
</body>
</html>
浙公网安备 33010602011771号