<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑入滑出</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } #container { overflow: hidden; } #left { background: #ccc; float: left; width: 200px; } #content { background: #eee; overflow: hidden; } </style></head><body><div id="container"> <div id="left" class="aside">Left Sidebar</div> <div id="content" class="section">Main Content</div></div><script type="text/javascript"> $(function () { //alert('this is second line!'); //滑动进入滑出 var fbox = $('#hoverBox'), hbox = $('#hide'); var w = fbox.outerWidth(), h = fbox.outerHeight(); fbox.mouseenter(function (e) { var inX = (e.clientX - fbox.offset().left - (w / 2)) * (w > h ? (h / w) : 1); console.log(e.clientX - fbox.offset().left - (w / 2)); var inY = (e.clientY - fbox.offset().top - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(inY, inX) * (180 / Math.PI)) + 180) / 90) + 3) % 4; // 上(0) 右(1) 下(2) 左(3) switch (direction) { case 0: { //上 hbox.css({'left': 0, 'top': '-100%'}); } break; case 1: { //右 hbox.css({left: '100%', top: '0'}); } break; case 2: { //下 hbox.css({left: '0', top: '100%'}); } break; case 3: { //左 hbox.css({left: '-100%', top: '0'}); } break; } hbox.animate({'left': 0, 'top': 0}, 200); }); fbox.mouseleave(function (e) { var inX = (e.clientX - fbox.offset().left - (w / 2)) * (w > h ? (h / w) : 1); var inY = (e.clientY - fbox.offset().top - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(inY, inX) * (180 / Math.PI)) + 180) / 90) + 3) % 4; // 上(0) 右(1) 下(2) 左(3) switch (direction) { case 0: { //上 hbox.animate({'left': '0', 'top': '-100%'}, 200); ; } break; case 1: { //右 hbox.animate({'left': '100%', 'top': '0'}, 200); ; } break; case 2: { //下 hbox.animate({'left': 0, 'top': '100%'}, 200); ; } break; case 3: { //左 hbox.animate({'left': '-100%', 'top': 0}, 200); ; } break; } }); });</script></body></html>
转载于:https://www.cnblogs.com/znj211985211/p/5357917.html
相关资源：html css jquery实现左侧边栏滑入滑出
