這段代碼是用來判斷當前頁面刷新還是關(guān)閉。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計、隴川網(wǎng)絡(luò)推廣、小程序開發(fā)、隴川網(wǎng)絡(luò)營銷、隴川企業(yè)策劃、隴川品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供隴川建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
首先有點知識我得和樓主說明一下：
其實這段代碼主要是用于聊天室窗口的，一般的聊天室窗口是除了標題欄和側(cè)滑欄，其余的XX欄都沒有的。用javascript彈出一個這樣的窗口的代碼是：
script language="JavaScript"
window.open('欲加載的網(wǎng)頁的地址','_blank','width=窗口寬,height=窗口高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');
/script
其中值為“no”的就是不要的XX欄。
這段代碼中有幾個屬性值得說明一下：
1.window.onbeforeunload():此方法被觸發(fā)于：
關(guān)閉瀏覽器窗口
通過地址欄或收藏夾前往其他頁面的時候
點擊返回，前進，刷新，主頁其中一個的時候
點擊 一個前往其他頁面的url連接的時候
如果是用于上面我提到的聊天室窗口，那就只考慮兩個事件四個方法：
1、正常關(guān)閉：點擊關(guān)閉按鈕（右上角，這個按鈕的大小和代碼中那個“-20”有關(guān)，最后我會說到）；或者 按下ALT+F4鍵（所以代碼中有對ALT鍵的檢測）。
2、正常刷新：按下F5鍵；或者 通過右鍵刷新。
2.
window.event.screenX：鼠標相對于用戶屏幕的水平位置
window.screenLeft：窗口左上角相對于屏幕左上角的水平位置
window.event.clientY：鼠標在窗口客戶區(qū)域（除去所有的XX欄）中的Y坐標（比如在標題欄上時，該值為負值）
window.event.altKey：當alt鍵按下時，值為 TRUE ，否則為 FALSE 。只讀。
document.documentElement.scrollWidth：窗口網(wǎng)頁正文全文寬
所以
n = window.event.screenX - window.screenLeft：
求出鼠標在當前窗口上的水平位置（參照：當前窗口左上角為0、0坐標）。
b = n document.documentElement.scrollWidth-20：
只看水平坐標：鼠標在當前窗口內(nèi)時，nm，b為false；鼠標在當前窗口外時，nm，b為true。20這個值是指關(guān)閉按鈕的寬度。 m=document.documentElement.scrollWidth-20
window.event.clientY 0：
只看垂直坐標：鼠標在客戶區(qū)內(nèi)時，y0，x為false；鼠標在客戶區(qū)外時，y0，x為true。y=window.event.clientY
綜上：
當onbeforeunload時間發(fā)生時，有ALT按下，或者鼠標的位置在標題欄的最右上角（鼠標停留在關(guān)閉按鈕上時）。就能執(zhí)行if為真的語句了。
window.event.returnValue = ""; 主要是用來當用戶關(guān)閉了窗口而不是刷新時返回一個值，這個值由你設(shè)定。
!----------------------------------------------------------------
如果這樣說，不太好懂。
我把代碼做成了實例，自己刷新或者關(guān)閉頁面試試就明白了。
兩個頁面，第一個頁面用來彈出第二個頁面，第二頁面為我們需要了解的代碼所在頁面。
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; //檢測鼠標相對于用戶屏幕的水平位置 - 網(wǎng)頁正文部分左：求出鼠標在當前窗口上的水平位置（參照：當前窗口右上角為0、0坐標）
var m = document.documentElement.scrollWidth-20; //網(wǎng)頁正文全文寬
var y = window.event.clientY; //返回鼠標在窗口客戶區(qū)域（除去所有的XX欄）中的Y坐標
var z = window.event.altKey //當alt鍵按下時，值為 TRUE ，否則為 FALSE 。只讀。
var b = n m; //只看水平坐標：鼠標在頁面內(nèi)時，nm，b為false；鼠標在頁面外，nm，b為true。
var x = y 0; //只看垂直坐標：鼠標在客戶區(qū)內(nèi)時，y0，x為false；鼠標在客戶區(qū)外時，y0，x為true。
if(b x || z) //當onbeforeunload時間發(fā)生時，
{
alert("是關(guān)閉而非刷新\r\n"+"鼠標在當前窗口上的水平位置："+n+"\r\n網(wǎng)頁正文全文寬："+m+"\r\n鼠標在窗口客戶區(qū)域中的Y坐標："+y+"\r\nALT鍵是否按下："+z);
window.event.returnValue = ""; //這里可以放置你想做的操作代碼
}else{
alert("是刷新而非關(guān)閉\r\n"+"鼠標在當前窗口上的水平位置："+n+"\r\n網(wǎng)頁正文全文寬："+m+"\r\n鼠標在窗口客戶區(qū)域中的Y坐標："+y+"\r\nALT鍵是否按下："+z);
}
}
/script
p
聊天室
/p
/body
/html
注意：：：：：：
這個代碼看似不錯，但是有一點，它的基礎(chǔ)是以用戶的瀏覽器窗口為標準windows窗口而定的。也就是說，用戶的瀏覽器窗口得是win2000那個樣子的，因為這個樣子下，關(guān)閉按鈕的大小才會在 20 象素以內(nèi)。如果用戶的窗口不是標準的windows窗口，而是其它的主題等等，這段代碼可能就用不了了！
此外有個小BUG，當鼠標停留在最右上角（關(guān)閉按鈕）時按下F5。代碼會執(zhí)行關(guān)閉窗口時的代碼，但是窗口卻只是刷新而已卻不會關(guān)閉。
js那一級查二級寫法如下
點擊打開/收縮 二級 列表 ;2, 列表 下拉刷新數(shù)據(jù);
3, 列表 上拉加載更多數(shù)據(jù);
4, 列表 item項可側(cè)滑
1)定義變量的時候要指明類型，告訴 JS 解釋器這個變量是什么數(shù)據(jù)類型的，而不要讓解釋器去猜。
可以參考：
為了建立導(dǎo)航菜單，讓我們先看看html結(jié)構(gòu)：
!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來實現(xiàn)菜單的切換。
面板按鈕
每個網(wǎng)站面板導(dǎo)航按鈕都類似。它往往是一個圖標字體，如fontawesome，但在本教程中我想添加一些動畫，所以我們用橫線來實現(xiàn)?；旧希覀兊陌粹o是一個跨度，包含三個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樣式。類其余的樣式被移動到單獨的樣式文件中。動畫發(fā)生時，我們添加一個類.button-open。我們引用jQuery，可以比較方便的實現(xiàn)它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初學(xué)者可能不熟悉jQuery，讓我解釋一下這是怎么回事。首先，我們初始化一個變量稱為$togglebutton，其中包含我們的按鈕。我們將它存儲為一個變量，然后我們創(chuàng)建一個事件監(jiān)視器監(jiān)聽點擊按鈕。每單擊一次，事件監(jiān)聽器會執(zhí)行方法 function toggleclass()來切換.button-open。
.button-open我們可以用它來改變這些元素的顯示方式。我們使用CSS3 translate()和rotate()功能使頂部和底部的橫線旋轉(zhuǎn)45度，與中間的橫線逐漸消失。你可以點擊Demo中的按鈕來看看效果。
側(cè)滑菜單
側(cè)滑菜單的html的結(jié)構(gòu)如下：
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
在這里不詳細解釋每個風(fēng)格的菜單，我們看下.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;
}
它的位置是固定的，所以菜單一直在同一個地方滾動。高度設(shè)為100%。注意，左邊距設(shè)置為負數(shù)，使這菜單從視圖中消失。為了讓它有一個出現(xiàn)的特效，我們用jquery來了調(diào)用另一class來顯示和關(guān)閉。JavaScript代碼如下：
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
我們增加一個變量$menuwrap其中包含菜單的所有項，并使用相同的事件來創(chuàng)建按鈕。這個.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偽元素包實現(xiàn)fontawesome箭頭。默認情況下，子菜單是隱藏的，只有單擊父級菜單時才出現(xiàn)：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
當我們單擊箭頭，一個函數(shù)被調(diào)用時，它的目標的下一個元素之后的span并使其可見。我們使用的jquery的slidetoggle。它使一個元素滑動效果的出現(xiàn)或消失，函數(shù)有一個動畫時間參數(shù)。
最后，我們的演示菜單項有一個懸停效果。它是使用一個::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偽元素包含在每個環(huán)節(jié)下絕對定位的塊級元素，隨著0.15em高度和寬度。我們不只是應(yīng)用背景顏色的線，我們使用linear-gradient() 在背景圖像功能。雖然這個功能的目的是使顏色梯度，我們可以通過指定的百分比，做了一個漸變的顏色變化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
這里一半的線是透明的，另一半是黃色的。通過背景大小200%的寬度，使透明部分占用的所有鏈接的寬度。
重慶分公司
重慶分公司
