[英]How to detect if mouse pointer is out of my section
我只是在css中创建了分屏，但是我想像指针从节代码中移出时一样进行处理，当刷新时，句柄以原始形式出现在原始位置。 我想像这样https://www.corsair.com/eu/en/specalpha
document.addEventListener('DOMContentLoaded', function () { let wrapper = document.getElementById('wrapper'); let topLayer = wrapper.querySelector('.top'); let handle = wrapper.querySelector('.handle'); let skew = 0; let delta = 0; let isOnDiv = false; if (wrapper.className.indexOf('skewed') != -1) { skew = 1000; } function positionHandler(e) { if ((e.clientX) && (e.clientY)) { delta = (e.clientX - window.innerWidth / 2) * 0.5; handle.style.left = e.clientX + delta + 'px'; topLayer.style.width = e.clientX + skew + delta + 'px'; } else if (e.targetTouches) { delta = (e.targetTouches[0].clientX - window.innerWidth / 2) * 0.5; handle.style.left = e.targetTouches[0].clientX + delta + 'px'; topLayer.style.width = e.targetTouches[0].clientX + skew + delta + 'px'; e.preventDefault(); } }; wrapper.addEventListener('mousemove', positionHandler, false); wrapper.addEventListener('touchstart', positionHandler, false); wrapper.addEventListener('touchmove', positionHandler, false); wrapper.addEventListener("mouseleave", resetPositionHandler, false); function resetPositionHandler(e) { handle.style.left = '50%'; topLayer.style.width = 'calc(50vw + 1000px)'; } });
body{ margin: 0; padding: 0; font-size: 100%; line-height: 1.6; font-family: Arial, Helvetica, sans-serif; } #wrapper{ position: relative; width: 100%; min-height: 55vw; overflow: hidden; } .layer{ position: absolute; width: 100vw; min-height: 55vw; overflow: hidden; } .layer .content-wrap{ position: absolute; width: 100vw; min-height: 55vw; } .layer .content-body{ width: 25%; position: absolute; top: 50%; text-align: center; transform: translateY(-50%); color: #ffff; } .layer img{ position: absolute; width: 35%; top: 50%; left: 50%; transform: translate(-50%,-50%); } .layer h1{ font-size: 2em; } .bottom{ background: #222; z-index: 1; } .bottom .content-body{ right: 5%; } .bottom h1{ color: #FDAB00; } .top{ background: #eee; color: #222; z-index: 2; width: 50vw; } .top .content-body{ left: 5%; color: #222; } .handle{ position: absolute; height: 100%; display: block; background-color: #FDAB00; width: 5px; top: 0; left: 50%; z-index: 3; } .skewed .handle{ top: 50%; transform: rotate(30deg) translateY(-50%); height: 200%; transform-origin: top; } .skewed .top{ transform: skew(-30deg); margin-left: -1000px; width: calc(50vw + 1000px); } .skewed .top .content-wrap{ transform: skew(30deg); margin-left: 1000px; } div.angrytext { font-size:70px; font-weight:bold; color:#4794D3; width:300px; margin:90px auto; -webkit-animation: jump 4s linear 0s infinite normal ; animation: jump 4s linear 0s infinite normal ; } .cs_logo{ margin-right: 30px; } @-webkit-keyframes jump { 0%{ -webkit-transform: translateY(0); transform: translateY(0); } 13%{ -webkit-transform: translateY(0); transform: translateY(0); } 40%{ -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50%{ -webkit-transform: translateY(0); transform: translateY(0); } 60%{ -webkit-transform: translateY(-15px); transform: translateY(-15px); } 80%{ -webkit-transform: translateY(0); transform: translateY(0); } 100%{ -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes jump { 0%{ transform: translateY(0); } 13%{ transform: translateY(0); } 40%{ transform: translateY(-5px); } 50%{ transform: translateY(0); } 60%{ transform: translateY(-5px); } 80%{ transform: translateY(0); } 100%{ transform: translateY(0); } } div.card{ background:linear-gradient(135deg, #201f24 0%,#40304d 100%); box-shadow: 10px 10px 20px rgb(49, 49, 49); } @media(max-width:768px){ body{ font-size: 75%; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Split Screen</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <section id="wrapper" class="skewed"> <div class="layer bottom"> <div class="content-wrap"> <div class="content-body"> <h1>Machine</h1> <p>The machine side of the game is really complex yet easy !</p> <p1>The machines are specially crafted to challenge your human brain to it's core</p1> <p2>Only the ones with real human intelligence can solve them being too technical is sometimes a hurdle itself</p2> </div> <img src="img/pic01.png" alt=""> </div> </div> <div class="layer top"> <div class="content-wrap"> <div class="content-body"> <h1>Human</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis architecto consequuntur officia voluptatibus odio maxime quos reprehenderit vero iste eos!</p> </div> <img src="img/pic02.png" alt=""> </div> </div> <div class="handle"></div> </section> <section> <div class="card-deck"> <div class="card text-center" style="width: 18rem; height: 25rem"> <div class='angrytext'><img class="cs_logo" src="img/cs_logo.png" height=100px width=150px></div> <div class="card-body"> <p class="card-text" style="color:#ffffff">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-center" style="width: 18rem; height: 25rem"> <div class='angrytext'><img class="cs_logo" src="img/cs_logo.png" height=100px width=150px></div> <div class="card-body"> <p class="card-text" style="color:#ffffff">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-center" style="width: 18rem; height: 25rem"> <div class='angrytext'><img class="cs_logo" src="img/cs_logo.png" height=100px width=150px></div> <div class="card-body"> <p class="card-text" style="color:#ffffff">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </section> <script src="js/main.js"></script> </body> </html>
你们能帮我巧妙地做这些事情吗，我不知道我要搜索和尝试什么
您需要做的就是在“ mouseleave”事件中将其重置为初始值
wrapper.addEventListener("mouseleave", resetPositionHandler, false);
function resetPositionHandler(e) {
handle.style.left = '50%';
topLayer.style.width = 'calc(50vw + 1000px)';
}
如何在鼠标悬停时逐渐消失的Spotify迷你播放器控件部分添加div框？
[英]How can I add a div box on my Spotify mini player controls section that fades out on mouse hover?
如何检测鼠标指针是否击中已在 HTML 5 画布上绘制的线条
[英]How to detect if a mouse pointer hits a line already drawn on an HTML 5 canvas
如何在使用我自己的鼠标滚轮smoothscroll时缩放鼠标指针？
[英]How to zoom to mouse pointer while using my own mousewheel smoothscroll?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.