正文
JavaScript侧滑,html侧滑
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
求Javascript达人 解惑！！
这段代码是用来判断当前页面刷新还是关闭。
首先有点知识我得和楼主说明一下：
其实这段代码主要是用于聊天室窗口的，一般的聊天室窗口是除了标题栏和侧滑栏，其余的XX栏都没有的。用javascript弹出一个这样的窗口的代码是：
script language="JavaScript"
window.open('欲加载的网页的地址','_blank','width=窗口宽,height=窗口高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');
/script
其中值为“no”的就是不要的XX栏。
这段代码中有几个属性值得说明一下：
1.window.onbeforeunload():此方法被触发于：
关闭浏览器窗口
通过地址栏或收藏夹前往其他页面的时候
点击返回，前进，刷新，主页其中一个的时候
点击 一个前往其他页面的url连接的时候
如果是用于上面我提到的聊天室窗口，那就只考虑两个事件四个方法：
1、正常关闭：点击关闭按钮（右上角，这个按钮的大小和代码中那个“-20”有关，最后我会说到）；或者 按下ALT+F4键（所以代码中有对ALT键的检测）。
2、正常刷新：按下F5键；或者 通过右键刷新。
2.
window.event.screenX：鼠标相对于用户屏幕的水平位置
window.screenLeft：窗口左上角相对于屏幕左上角的水平位置
window.event.clientY：鼠标在窗口客户区域（除去所有的XX栏）中的Y坐标（比如在标题栏上时，该值为负值）
window.event.altKey：当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。
document.documentElement.scrollWidth：窗口网页正文全文宽
所以
n = window.event.screenX - window.screenLeft：
求出鼠标在当前窗口上的水平位置（参照：当前窗口左上角为0、0坐标）。
b = n document.documentElement.scrollWidth-20：
只看水平坐标：鼠标在当前窗口内时，nm，b为false；鼠标在当前窗口外时，nm，b为true。20这个值是指关闭按钮的宽度。 m=document.documentElement.scrollWidth-20
window.event.clientY 0：
只看垂直坐标：鼠标在客户区内时，y0，x为false；鼠标在客户区外时，y0，x为true。y=window.event.clientY
综上：
当onbeforeunload时间发生时，有ALT按下，或者鼠标的位置在标题栏的最右上角（鼠标停留在关闭按钮上时）。就能执行if为真的语句了。
window.event.returnValue = ""; 主要是用来当用户关闭了窗口而不是刷新时返回一个值，这个值由你设定。
!----------------------------------------------------------------
如果这样说，不太好懂。
我把代码做成了实例，自己刷新或者关闭页面试试就明白了。
两个页面，第一个页面用来弹出第二个页面，第二页面为我们需要了解的代码所在页面。
test1.html
html
body
script language="JavaScript"
window.open('test2.html','_blank','width=600,height=600,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');
/script
/body
/html
test2.html
html
body
body
SCRIPT LANGUAGE="JavaScript"
window.onbeforeunload = function()
{
var n = window.event.screenX - window.screenLeft; //检测鼠标相对于用户屏幕的水平位置 - 网页正文部分左：求出鼠标在当前窗口上的水平位置（参照：当前窗口右上角为0、0坐标）
var m = document.documentElement.scrollWidth-20; //网页正文全文宽
var y = window.event.clientY; //返回鼠标在窗口客户区域（除去所有的XX栏）中的Y坐标
var z = window.event.altKey //当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。
var b = n m; //只看水平坐标：鼠标在页面内时，nm，b为false；鼠标在页面外，nm，b为true。
var x = y 0; //只看垂直坐标：鼠标在客户区内时，y0，x为false；鼠标在客户区外时，y0，x为true。
if(b x || z) //当onbeforeunload时间发生时，
{
alert("是关闭而非刷新\r\n"+"鼠标在当前窗口上的水平位置："+n+"\r\n网页正文全文宽："+m+"\r\n鼠标在窗口客户区域中的Y坐标："+y+"\r\nALT键是否按下："+z);
window.event.returnValue = ""; //这里可以放置你想做的操作代码
}else{
alert("是刷新而非关闭\r\n"+"鼠标在当前窗口上的水平位置："+n+"\r\n网页正文全文宽："+m+"\r\n鼠标在窗口客户区域中的Y坐标："+y+"\r\nALT键是否按下："+z);
}
}
/script
p
聊天室
/p
/body
/html
注意：：：：：：
这个代码看似不错，但是有一点，它的基础是以用户的浏览器窗口为标准windows窗口而定的。也就是说，用户的浏览器窗口得是win2000那个样子的，因为这个样子下，关闭按钮的大小才会在 20 象素以内。如果用户的窗口不是标准的windows窗口，而是其它的主题等等，这段代码可能就用不了了！
此外有个小BUG，当鼠标停留在最右上角（关闭按钮）时按下F5。代码会执行关闭窗口时的代码，但是窗口却只是刷新而已却不会关闭。
相关问答
Q1: js那一级查二级写法
js那一级查二级写法如下
点击打开/收缩 二级 列表 ;2, 列表 下拉刷新数据;
3, 列表 上拉加载更多数据;
4, 列表 item项可侧滑
1)定义变量的时候要指明类型，告诉 JS 解释器这个变量是什么数据类型的，而不要让解释器去猜。
Q2: 如何用CSS和jQuery实现一个侧滑导航菜单
可以参考：
为了建立导航菜单，让我们先看看html结构：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleAnimation Menu Demo/title
link rel="stylesheet" href=""
link href='' rel='stylesheet' type='text/css'
link rel="stylesheet" href=""
script src=""/script
script src="script.js"/script
link rel="stylesheet" href="style.css"
/head
body
!-- Content goes here --
/body
/html
首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。
面板按钮
每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。
span class="toggle-button"
div class="menu-bar menu-bar-top"/div
div class="menu-bar menu-bar-middle"/div
div class="menu-bar menu-bar-bottom"/div
/span
样式看起来如下：
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}
按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :15的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。
.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。
侧滑菜单
侧滑菜单的html的结构如下：
div class="menu-wrap"
div class="menu-sidebar"
ul class="menu"
lia href="#"Home/a/li
lia href="#"About/a/li
lia href="#"Blog/a/li
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
lia href="#"Alignment/a/li
lia href="#"Markup/a/li
lia href="#"Comments/a/li
/ul
/li
lia href="#"Courses/a/li
lia href="#"Get In Touch/a/li
/ul
/div
/div
在这里不详细解释每个风格的菜单，我们看下.menu-wrap 的div。它的样式如下：
.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
它的位置是固定的，所以菜单一直在同一个地方滚动。高度设为100%。注意，左边距设置为负数，使这菜单从视图中消失。为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下：
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
我们增加一个变量$menuwrap其中包含菜单的所有项，并使用相同的事件来创建按钮。这个.menu-show的左边距为0，并增加了一些盒子阴影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜单和链接
你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时，链接后，有一个class .sidebar-menu-arrow。
li class="menu-item-has-children"a href="#"Click The Arrow/a
span class="sidebar-menu-arrow"/span
ul class="sub-menu"
!-- List items --
/ul
/li
span 有一个::after伪元素包实现fontawesome箭头。默认情况下，子菜单是隐藏的，只有单击父级菜单时才出现：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
当我们单击箭头，一个函数被调用时，它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失，函数有一个动画时间参数。
最后，我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下：
.menu-sidebar li a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li a:hover::after {
background-position: -100% 0;
}
这个::after伪元素包含在每个环节下绝对定位的块级元素，随着0.15em高度和宽度。我们不只是应用背景颜色的线，我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度，我们可以通过指定的百分比，做了一个渐变的颜色变化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
这里一半的线是透明的，另一半是黄色的。通过背景大小200%的宽度，使透明部分占用的所有链接的宽度。
