1.client家族
◆box.clientWidth：表示盒子的寬度加padding
◆box.clientHeight：表示盒子的高度加padding
◆box.clientTop:表示盒子上邊的border大小
◆box.clientLeft:表示盒子左邊的border大小
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client家族</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(box.clientWidth);//表示盒子的寬度加padding
console.log(box.clientHeight);//表示盒子的高n度加padding
console.log(box.clientTop);//表示盒子上邊的border大小
console.log(box.clientLeft);//表示盒子左邊的border大小
</script>
</body>
</html>2.offset與scroll和client他們的width、height的區別
◆offsetWidth和offsetHeight代表着盒子的寬高（如果盒子定義的了寬高，就以定義的寬高爲主，如果盒子沒有定義寬高就以盒子內容爲主）加上padding+border。
◆scrollWidth和scrollHeight代表着盒子的內容的寬高（如果內容的寬高小於盒子定義的寬高，那麼就以盒子定義的寬高爲主，如果盒子的內容寬高大於盒子定義一個寬高，那麼久以盒子的內容的寬高爲主）+padding。
◆clientWidth和clientHeight代表着盒子的寬高(就算內容超過盒子，它也只獲取盒子定義的寬高，如果盒子沒有定義寬高，那麼就獲取內容的寬高)+padding。
3.offset與scroll和client他們的top、left的區別
◆offsetTop和offsetLeft代表着距離最近的父系盒子帶有定位的盒子之間的距離，也就是帶有定位的盒子與盒子之間的上邊的距離和左邊的距離，如果父系盒子中沒有定位的盒子，那麼就取當前盒子距離瀏覽器（0,0）座標點的距離。◆scrollTop和scrollLeft代表着被捲去的距離，除了document之外其它盒子也能用，但是盒子必須要有滾動條，但是自己模擬的滾動條不行，只能使用css樣式overflow:scroll;弄出來的滾動條才行。
◆clientTop和clientLeft代表着clientWidth和clientHeight不包括的上border和左border，而且只能夠獲取到上邊的border和左邊的border。
4. 使用client對象檢測瀏覽器的寬度和高度（可視區域），也就是當你放大縮小時寬度高度就會發生變化，因爲可視區域也發生了變化，檢測的方式與獲取scollLeft和scrollTop類似
◆無論有沒有DTD，在IE9及其以上的版本的瀏覽器和一些主流瀏覽器可以使用
window.innerWidth和window.innerHeight來檢測並獲取當前瀏覽器可視區域的寬高，在IE9以下時，獲取的值都是undefined。
◆當有DTD時，可以使用
document.documentElement.clientWidth和document.documentElement.clientHeight來檢測並獲取當前任何版本瀏覽器可視區域的寬高，如果沒有DTD時用這個只能夠正常檢測IE任何版本的瀏覽器的可視區域的寬高。
◆當沒有DTD時，可以使用
document.body.clientWidth和document.body.clientHeight在IE9以上的瀏覽器及各個主流瀏覽器檢測當前瀏覽器的可視區域的寬高，但是有DTD時無法正常檢測任何版本的瀏覽器的可視區域的寬高。
★所以兼容性寫法和scrollTop與scrollLeft有點不一樣
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用client檢測瀏覽器可視區域寬高</title>
</head>
<body>
<script>
/**
* 使用client對象檢測瀏覽器的寬度和高度（可視區域），
* 也就是當你放大縮小時寬度高度就會發生變化，
* 因爲可視區域也發生了變化，
* 檢測的方式與獲取scollLeft和scrollTop類似
* ◆無論有沒有DTD，
* 在IE9及其以上的版本的瀏覽器和一些主流瀏覽器
* 可以使用window.innerWidth和window.innerHeight來檢測
* 並獲取當前瀏覽器可視區域的寬高，
* 在IE9以下時，獲取的值都是undefined。
* ◆當有DTD時，可以使用document.documentElement.clientWidth
* 和document.documentElement.clientHeight來檢測
* 並獲取當前任何版本瀏覽器可視區域的寬高，
* 如果沒有DTD時用這個只能夠正常檢測IE任何版本的瀏覽器的可視區域的寬高。
* ◆當沒有DTD時，可以使用document.body.clientWidth和
* document.body.clientHeight在IE9以上的瀏覽器及各個主流瀏覽器檢測
* 當前瀏覽器的可視區域的寬高，
* 但是有DTD時無法正常檢測任何版本的瀏覽器的可視區域的寬高。
* ★所以兼容性寫法和scrollTop與scrollLeft有點不一樣【
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
】,
*不能夠正常檢測的是指高度，高度無法正常檢測，
* 寬度時而能夠正常檢測時而不能夠正常檢測，
* 所以這種兼容性寫法，可能在一些老的瀏覽器中還是會出現問題，
* 但是這個已經是最好的兼容性寫法。
*/
//瀏覽器可視區域大小改變事件（只要瀏覽器可視區域有1像素的改變都會觸發這個事件）
window.onresize = fn;
function fn() {
console.log(window.innerWidth + " " + window.innerHeight);
console.log(document.documentElement.clientWidth + " " + document.documentElement.clientHeight);
console.log(document.body.clientWidth + " " + document.body.clientHeight);
document.title = client().width + "px " + client().height + "px";
}
fn();//首次打開瀏覽器，並不一定會觸發window.onresize事件，所以先執行一次
/**
* 功能：用來檢測瀏覽器可視區域的兼容性的client對象
* @returns {{width: (Number|number), height: (Number|number)}}
*/
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
</script>
</body>
</html>5.頁面適配瀏覽器：根據瀏覽器可視寬度給頁面上顏色
◆window.onresize事件是可視區域大小改變事件，只要瀏覽器可視區域發生1px的變化，都會觸發window.onresize事件，就像window.onscroll事件一樣，只要滾動條中的滑塊兒移動1px，都會觸發window.onscroll事件，注意：首次打開瀏覽器並不一定會觸發window.onresize事件，只有當你改變瀏覽器窗體大小的時候纔會觸發。
◆根據瀏覽器可視寬度給頁面上顏色：在css3沒有退出媒體查詢之前就是使用這種方式，來讓網頁來根據瀏覽器的可視區域動態適配css樣式的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根據瀏覽器可視寬度給頁面上顏色</title>
</head>
<body>
<script>
//需求：當屏幕寬度大於960時就給頁面紅色背景，
// 當屏幕寬度小於等於960大於640時就給頁面上藍色，
// 當屏幕寬度小於等於640時就給頁面上綠色
//瀏覽器可視區域的大小改變的事件
window.onresize = fn;
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "#f00";
} else if (client().width > 640) {
document.body.style.backgroundColor = "#00f";
} else {
document.body.style.backgroundColor = "#0f0";
}
document.title = client().width + "px " + client().height + "px";
}
fn();
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
</script>
</body>
</html>6.獲取屏幕分辨率的高度和寬度可以window.screen.width和window.screen.height來獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用screen對象檢測屏幕分辨率大小</title>
</head>
<body>
<script>
window.οnresize=fn();
function fn(){
document.title=window.screen.width+"px "+window.screen.height+"px";
}
fn();
</script>
</body>
</html>7.事件冒泡
◆簡單描述：事件冒泡：當一個元素上的事件被觸發的時候，其所有父系容器如果定義了和這個元素被觸發的事件時，那就會觸發其所有父系容器的這個事件，比如鼠標點擊了一個按鈕，按鈕設置了單擊事件，按鈕的父容器也設置了單擊事件，那麼你點擊鼠標按鈕時觸發了單擊事件，於此同時也會觸發父容器的單擊事件，元素開始不斷的往上冒泡，一直冒泡到dom樹的頂端
◆冒泡的原理：因爲子容器在父容器中，你點擊子容器的時候，其實也相當於點擊了父容器的區域，所以就等於你先點擊了子容器，然後你由點擊了父容器的區域，於是乎當你給子容器和父容器都設置了單擊事件時，先觸發子容器的單擊事件然後再觸發父容器的單擊事件，如果父容器的父容器也還設置了單擊事件，那麼就會一直往上觸發單擊事件。
◆事件傳播階段分三個：捕獲階段、冒泡階段、目標階段
◇事件捕獲階段：事件從最上一級標籤開始往下查找，直到捕獲到事件目標（target）爲止。
◇事件冒泡階段：事件從事件目標（target）開始往上冒泡直到頁面的最上一級標籤。
☆使用捕獲的方式執行事件可是使用對象.addListenerEvent("事件",fn,true);來實現，使用冒泡的方式執行事件可以使用對象.on事件=fn;來實現。
◇事件目標階段：其實很像是在捕獲階段是從外往內的，將每一個事件push進一個數組中，冒泡階段是從數組中pop出來，事件目標階段，將pop出的事件的方法執行，整個過程很像是一個進棧出棧然後執行。
◆冒泡順序：
◇IE6.0：div->body->html->document
◇其它瀏覽器：div->body->html->document->window
☆這些事件不會冒泡也不能冒泡：blur、focus、load、unload、onmouseenter、onmouseleave
◆判斷一個事件默認冒不冒泡，使用event.bubbles，如果返回值爲true則這個事件冒泡，反之這個事件不冒泡。在冒泡中找到最開始的第一個觸發這個事件的對象，使用event.target，誰是第一個泡泡，target就指向誰，但是在IE678中使用了srcElement，所以就需要兼容性的寫法，有兩種，一種直接用 || 一種是用三元運算符
var obj=event.target||event.srcElement;//返回true就是冒泡
var obj=event.target?event.target:event.srcElement;//返回true就是冒泡<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡的相關信息</title>
<style type="text/css">
#box1 {
width: 500px;
height: 500px;
background-color: #f0f;
}
#box2 {
width: 400px;
height: 400px;
background-color: #0ff;
}
#box3 {
width: 300px;
height: 300px;
background-color: #ff0;
}
#box4 {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script>
/**
* 1.事件冒泡：
* 當一個元素上的事件被觸發的時候，
* 其所有父系容器如果定義了和這個元素被觸發的事件時，
* 那就會觸發其所有父系容器的這個事件，
* 比如鼠標點擊了一個按鈕，
* 按鈕設置了單擊事件，
* 按鈕的父容器也設置了單擊事件，
* 那麼你點擊鼠標按鈕時觸發了單擊事件，
* 於此同時也會觸發父容器的單擊事件，
* 元素開始不斷的往上冒泡，
* 一直冒泡到dom樹的頂端，
*
* 2.冒泡的原理：
* 因爲子容器在父容器中，
* 你點擊子容器的時候，
* 其實也相當於點擊了父容器的區域，
* 所以就等於你先點擊了子容器，
* 然後你由點擊了父容器的區域，
* 於是乎當你給子容器和父容器都設置了單擊事件時，
* 先觸發子容器的單擊事件然後再觸發父容器的單擊事件，
* 如果父容器的父容器也還設置了單擊事件，
* 那麼就會一直往上觸發單擊事件。
*
* 3.事件傳播階段分三個：
* 捕獲階段、冒泡階段、目標階段
*
* 事件捕獲階段：
* 事件從最上一級標籤開始往下查找，
* 知道捕獲到事件目標（target）爲止。
*
* 事件冒泡階段：
* 事件從事件目標（target）開始往上冒泡直到頁面的最上一級標籤。
* 使用捕獲的方式執行事件可是使用對象.addListenerEvent("事件",fn,true);來實現，
* 使用冒泡的方式執行事件可以使用對象.on事件=fn;來實現。
*
*
* 4.冒泡順序：
* IE6.0：div->body->html->document
* 其它瀏覽器：div->body->html->document->window
* 這些事件不會冒泡也不能冒泡：
* blur、focus、load、unload、onmouseenter、onmouseleave
*/
//事件冒泡 這種方式 事件是以冒泡的方式執行的 由內到外
box1.onclick = fn;
box2.onclick = fn;
box3.onclick = fn;
box4.onclick = fn;
document.body.onclick = fn;
//事件捕獲的方式執行 由外到內
// box1.addEventListener("click", function(){
// alert("box1");
// },true);
// box2.addEventListener("click", function(){
// alert("box2");
// },true);
// box3.addEventListener("click", function(){
// alert("box3");
// },true);
// box4.addEventListener("click", function(){
// alert("box4");
// },true);
// document.body.addEventListener("click", function(){
// alert("document");
// },true);
function fn() {
alert((this.getAttributeNode("id") ? this.getAttributeNode("id").nodeValue : "document"));
}
</script>
</body>
</html>8.取消事件冒泡
◆取消事件冒泡的方式，在IE678裏面使用 event.cancelBubble=ture;表示取消冒泡，但是在IE9及其以上的主流瀏覽器使用的是event.stopPropagation();表示停止傳播，也就是停止向外冒泡，阻止冒泡的兼容性寫法
obj.οnmοuseοver=function(event){
//獲取兼容性的事件對象
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();//停止冒泡
}else{
event.cancelBubble=true;//取消冒泡
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取消事件冒泡</title>
<style type="text/css">
#box1 {
width: 500px;
height: 500px;
background-color: #f0f;
}
#box2 {
width: 400px;
height: 400px;
background-color: #0ff;
}
#box3 {
width: 300px;
height: 300px;
background-color: #ff0;
}
#box4 {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script>
/**
* 取消事件冒泡的方式，
* 在IE678裏面使用event.cancelBubble=ture;表示取消冒泡，
* 但是在IE9及其以上的主流瀏覽器使用的是
* event.stopPropagation();
* 表示停止傳播，
* 也就是停止向外冒泡，
*/
//需求：阻止box1和box4的事件冒泡
//思路：在IE678 裏使用事件對象的 event.cancelBubble = true;//取消冒泡
// 在其它瀏覽器裏使用事件對象的 event.stopPropagation();//停止傳播
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件源
//3.書寫事件驅動程序
box1.onclick = function (event) {
//獲取兼容性的事件對象
event = event || window.event;
//判斷是否不是IE678
if (event && event.stopPropagation) {
event.stopPropagation();//停止傳播
} else {
event.cancelBubble = true;//取消冒泡
}
alert("box1這裏開始停止冒泡");
}
box2.onclick = function (event) {
//獲取兼容性的事件對象
event = event || window.event;
alert("box2冒泡嗎？答案是：" + event.bubbles);
}
box3.onclick = function (event) {
//獲取兼容性的事件對象
event = event || window.event;
alert("box3冒泡嗎？答案是：" + event.bubbles);
}
box4.onclick = function () {
//獲取兼容性的事件對象
event = event || window.event;
//判斷是否不是IE678
if (event && event.stopPropagation) {
event.stopPropagation();//停止傳播
} else {
event.cancelBubble = true;//取消冒泡
}
alert("box4一開始就停止冒泡");
}
document.body.onclick = function () {
alert("document");
}
</script>
</body>
</html>9.事件冒泡靈活運用之事件委託
◆利用事件冒泡和event.target可以減少很多不必要的事件的定義，通過判斷事件源的第一個對象，就知道是誰最開始觸發了這個事件，那麼就可以在最大的那個父容器的事件裏面做最直接的事情了，頁面元素的事件其實一直都存在，只不過是內部的事件驅動程序沒有寫罷了，所以就算你沒有給頁面元素手動設置事件，也能夠通過event.target來找到觸發事件的第一個事件源對象，
使用事件冒泡和事件源來顯示隱藏模態框：模態框效果，這個很常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用事件冒泡和事件源來顯示隱藏模態框</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.mask {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
overflow: hidden;
display: none;
position: fixed;
left: 0;
top: 0;
}
.login {
width: 450px;
height: 380px;
background-color: #ffc;
margin: 200px auto;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#">登陸</a>
<a href="#">註冊</a>
<div class="mask">
<div class="login" id="login"></div>
</div>
<script>
//需求：當點擊登陸鏈接時，彈出模態框，
// 模態框彈出之後，點擊登陸部分之外的部分就隱藏模態框
//思路：設置登陸鏈接點擊事件，然後設置文檔對象的點擊事件
// 點擊登陸連接之後，顯示模態框，由於事件冒泡，
// 所以也會觸發文檔對象的單擊事件，
// 判斷第一個事件源是不是login，
// 如果是login就不隱藏，反之就隱藏，
// 但是登陸鏈接的點擊事件要取消冒泡，
// 不然就會導致點擊登陸鏈接之後也會隱藏模態框
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關元素對象
var a = document.getElementsByTagName("a")[0];
var mask = document.getElementsByTagName("div")[0];
//2.綁定事件
a.onclick = function (event) {
//3.書寫事件驅動程序
//獲取兼容性的事件對象
event = event || window.event;
//取消默認的冒泡
if(event&&event.stopPropagation){
event.stopPropagation();//停止傳播 停止冒泡
}else {
event.cancelBubble=true;//取消冒泡 兼容IE678
}
show(mask);
}
/**
* 利用事件冒泡和event.target可以減少很多不必要的事件的定義，
* 通過判斷事件源的第一個對象，
* 就知道是誰最開始觸發了這個事件，
* 那麼就可以在最大的那個父容器的事件裏面做最直接的事情了，
* 頁面元素的事件其實一直都存在，
* 只不過是內部的事件驅動程序沒有寫罷了，
* 所以就算你沒有給頁面元素設置事件，
* 也能夠通過event.target來找到觸發事件的第一個事件源對象。
*/
document.body.onclick = function (event) {
//3.書寫事件驅動程序
//獲取兼容性的事件對象
event = event || window.event;
//獲取兼容性的第一個事件源對象
var obj = event.target || event.srcElement;
//判斷這個對象是否不是login對象
if (obj.id !== "login") { //通過這種方式 減少了很多事件的定義
hide(mask);
}
console.log(obj);
}
function show(element) {
element.style.display = "block";
}
function hide(element) {
element.style.display = "none";
}
</script>
</body>
</html>◆js中的【事件委託】是通過事件冒泡來實現的，通過設置父容器的事件，當調用自己的事件時，在父容器那裏去執行，從而，當子容器過多時減少了事件過多的定義，只需要定義一個父容器的事件即可，但是在父容器的事件中需要過濾，因爲並不是所有的子元素都需要定義事件，所以可能需要在父容器中設置判斷，判斷當前觸發的第一個事件源對象是否符合要求，如果符合的話就執行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過事件冒泡來進行事件委託</title>
<style type="text/css">
li {
height: 30px;
line-height: 30px;
background-color: #f00;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button>來1個移民Li</button>
<ul>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
</ul>
<script>
var button = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
//來五個移民li
button.onclick = function () {
var li = document.createElement("li");
li.innerHTML="我是新來的移民li";
ul.appendChild(li);
}
// //普通的綁定事件
// for (var i = 0; i < ul.children.length; i++) {
// ul.children[i].onclick = function () {
// alert(this.innerHTML);
// }
// }
//事件委託的綁定方式：
//上面的普通綁定事件的不好的地方在於
//由於js代碼是從上往下執行的，
// 事件綁定的這段代碼執行完畢之後就不會再繼續執行了
//所以會導致後來新增加進去的 li 沒有綁定那個事件
//通過事件冒泡的方式進行事件委託,
//可以實時的給新增加進來的li設置事件
//其實並不是給li綁定事件，
// 而是間接的給li設置了事件,
// 相當於把li的事件委託給了ul
ul.onclick = function (event) {
//獲取兼容性的事件對象
event = event || window.event;
//獲取兼容性的第一個事件源對象
var obj = event.target || event.srcElement;
if(obj.tagName.toLocaleLowerCase()==="li"){
alert(obj.innerHTML);
}
}
</script>
</body>
</html>10.獲取行內式、內嵌式、外鏈式的CSS樣式的各種方式
◆獲取對象的屬性值的兩種方式，第一種是對象.屬性名，第二種是對象["屬性名"]，第二種非常的靈活，第一種比較準確。
◆獲取行內式：對象.style.屬性名和對象.style["屬性名"]，這種方式只能取行內的樣式，這個style也是一個對象，它是頁面標籤中的style屬性裏的字符串轉換成了json對象，如果你想獲取頁面標籤中style屬性的字符串，可以使用style.cssText來獲取純字符串。
◆獲取內嵌式和外鏈式：對象.currentStyle.屬性名和對象.currentStyle["屬性名"]只能夠在IE瀏覽器中使用，window.getComputedStyle(對象,僞元素對象).屬性名和window.getComputedStyle(對象,僞元素對象)["屬性名"]可以在IE9及以上的等一些主流瀏覽器中使用，如果沒有僞元素對象可以給這個方法的參數賦值null，獲取行內式的方式只能夠獲取行內式，但是獲取內嵌式與外鏈式的方式其實還可以獲取行內式的樣式。
◆獲取內嵌式與外鏈式的兼容性寫法
if(window.getComputedStyle){
return window.getComputedStyle(element,null)["background-color"];
}else {
return element.currentStyle["background-color"];
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取外鏈式和內嵌式的css樣式</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: #901;
position: fixed;
/*left: 200px;*/
top: 200px;
}
</style>
</head>
<body>
<div id="box" style="left:250px;background-color: #901;"></div>
<script>
/**
* 獲取行內式、內嵌式、外鏈式的css樣式的方式：
*
* 獲取行內式：
* 對象.style.屬性名和對象.style["屬性名"]，
* 這種方式只能取行內的樣式，
* 這個style也是一個對象，
* 它是頁面標籤中的style屬性裏的字符串轉換成了json對象，
* 如果你想獲取頁面標籤中style屬性的字符串，
* 可以使用style.cssText來獲取純字符串。
*
* 獲取內嵌式和外鏈式：
* 對象.currentStyle.屬性名和對象.currentStyle["屬性名"]，
* 只能夠在IE瀏覽器中使用，
* window.getComputedStyle(對象,僞元素對象).屬性名
* 和window.getComputedStyle(對象,僞元素對象)["屬性名"]
* 可以在IE9及以上的等一些主流瀏覽器中使用，
* 如果沒有僞元素對象可以給這個方法的參數賦值null，
* 獲取行內式的方式只能夠獲取行內式，
* 但是獲取內嵌式與外鏈式的方式
* ★其實還可以獲取行內式的樣式。
*/
console.log(box.style.left);
// console.log(box.currentStyle.left);
console.log(window.getComputedStyle(box, null).left);
console.log(box.style.backgroundColor);//全部都可以獲取
console.log(box.style["backgroundColor"]);//全部都可以獲取
console.log(box.style["background-color"]);//全部都可以獲取
// console.log(box.currentStyle.backgroundColor);//全部都可以獲取
console.log("1" + window.getComputedStyle(box, null)["backgroundColor"]);//全部都可以獲取
console.log("2" + window.getComputedStyle(box, null)["background-color"]);//全部都可以獲取
console.log("3" + window.getComputedStyle(box, null).backgroundColor);//全部都可以獲取
console.log(box.style);
/**
* 功能：獲取兼容性的css樣式對象
* 其它：可以獲取內嵌式、外鏈式、行內式的樣式對象
* @param element
* @returns {*}
*/
function getStyle(element) {
return element.currentStyle ?
element.currentStyle :
window.getComputedStyle(element, null);
}
</script>
</body>
</html>◆無論是行內式的樣式還是內嵌式外鏈式的樣式，使用[]方括號的方式獲取樣式時，既可以使用駝峯命名法也可以使用-命名法，如box.style.backgroundColor即可以寫成box.style["backgroundColor"]也可以寫成box.style["background-color"]這樣，都行，但是如果使用對象.的方式只能夠使用駝峯命名法。
◆通過元素和屬性名獲取樣式的屬性值：內嵌式、外鏈式的CSS樣式的兼容性寫法
/**
* 功能：獲取該元素樣式屬性的屬性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}但是，當頁面使用ctrl+鼠標滾輪進行發大縮小時，會造成獲取getStyle(element, key)獲取的值有小數的。
11.勻速動畫計算步長與緩速動畫計算步長
◆勻速動畫計算步長
element.speed =element.target > element.leader ? 10 : -10;◆緩速動畫計算步長
//獲取步長
element.speed = (element.target- element.leader) / 10 || 0; //二次計算步長
element.speed = element.speed > 0 ?Math.ceil(element.speed) : Math.floor(element.speed);12.封裝緩速動畫框架
◆簡單版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封裝的兼容性樣式對象製作緩速動畫框架（簡單版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>移動到400</button>
<button>移動到900</button>
<div id="box1"></div>
</div>
<script>
//需求：當點擊按鈕時，緩速移動
//要求：必須使用封裝的兼容性對象的方法 方法參數1：元素對象 方法參數2:要獲取的屬性名（單個屬性）
//思路：封裝緩速移動的框架，多添加一個參數，attribute
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關元素對象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var btn2 = box.children[1];
var box1 = box.children[2];
//2.綁定事件
btn.onclick = function () {
//3.書寫事件驅動程序
animate(box1, "left", 400);
}
btn2.onclick = function () {
//3.書寫事件驅動程序
animate(box1, "left", 900);
}
/**
* 功能：獲取該元素樣式屬性的屬性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
/**
* 功能：緩速改變元素的屬性（類似緩速移動或者改變大小的動畫效果）
* @param element
* @param attribute
* @param target
*/
function animate(element, attribute, target) {
//使用定時器之前先清除定時器
clearInterval(element.timer);
//使用定時器
element.timer = setInterval(function () {
// 獲取當前的位置
element.leader = parseInt(getStyle(element, attribute)) || 0;
//獲取步長
element.speed = (target - element.leader) / 10 || 0;
//二次計算步長
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//重新設置當前位置
element.leader = element.leader + element.speed;
//判斷是否距離當前位置只有一步之遙了
if (Math.abs(target - element.leader) <= Math.abs(element.speed)) {
//直接到達指定目標位置
element.style[attribute] = target + 'px';
clearInterval(element.timer);
return;
}
//進行移動
element.style[attribute] = element.leader + "px";
}, 30);
}
</script>
</body>
</html>◆中級版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封裝的兼容性樣式對象製作緩速動畫框架（中級版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>開始動畫</button>
<div id="box1"></div>
</div>
<script>
//需求：當點擊按鈕時，緩速移動
//要求：必須使用封裝的兼容性對象的方法 方法參數1：元素對象 方法參數2:參數對象（多個屬性）
//思路：封裝緩速移動的框架，多添加一個參數，attribute
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關元素對象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var box1 = box.children[1];
//2.綁定事件
btn.onclick = function () {
//3.書寫事件驅動程序
var json = {width: 200.3, height: 200.3, left: 400.3, height: 400.3};
animate(box1, json);
}
/**
* 功能：獲取該元素樣式屬性的屬性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
//緩速改變元素的屬性（類似緩速移動或者改變大小的動畫效果）
function animate(element, json) {
//使用定時器之前先清除定時器
clearInterval(element.timer);
//使用定時器
element.timer = setInterval(function () {
//開閉思想
var bool = true;
//遍歷json對象 完成每一個屬性的緩速動畫效果
for (var key in json) {
//key作爲屬性名 json[key]作爲目標屬性值
//bug：當頁面使用ctrl+鼠標滾輪進行發大縮小時，
// 會造成獲取getStyle(element, key)獲取的值有小數，
//或者你傳遞進來的數值帶有小數，那麼就可能會造成死循環
//因爲parseInt是向下取整的，所以不能那樣子，只能夠向上取整
var str = getStyle(element, key)
var index = str.indexOf("px");
str = str.slice(0, index);
// 獲取當前的位置
element.leader = Math.ceil(str) || 0;
//獲取步長
element.speed = (json[key] - element.leader) / 10 || 0;
//二次計算步長
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//只要有一個位置不是指距離一步之遙
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + 'px';
continue;
} else {
bool = false;
}
//進行移動
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1);
if (bool) {
// //直接到達指定目標位置
clearInterval(element.timer);
}
}, 30);
}
</script>
</body>
</html>◆高級版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封裝的兼容性樣式對象製作緩速動畫框架（高級版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>走你，再回來</button>
<div id="box1" style="border-radius: 0px 5px 6px 7px;"></div>
</div>
<script>
//需求：當點擊按鈕時，緩速移動
//要求：必須使用封裝的兼容性對象的方法 方法參數1：元素對象 方法參數2:參數對象（多個屬性）
//新增要求：增加回調用函數，當動畫結束後執行回調用函數
//思路：封裝緩速移動的框架，多添加一個參數，attribute
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關元素對象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var box1 = box.children[1];
//2.綁定事件
btn.onclick = function () {
//3.書寫事件驅動程序
var json ={"border-radius":50} //{width: 200.3, height: 200.3, left: 400.3, top: 400.3};
var json2 = {width: 80.3, height: 80.3, left: 100.5, top: 60.6};
//執行完動畫後再執行回調函數
animate(box1, json, function () {
// animate(box1, json2, null);
});
}
/**
* 功能：獲取該元素樣式屬性的屬性值
* @param element
* @param attribute
* @returns {*}
*/
// function getStyle(element, attribute) {
// return element.currentStyle
// ?
// element.currentStyle[attribute]
// :
// window.getComputedStyle(element, null)[attribute];
// }
function getStyle(element, attribute) {
return (element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute])
||
element.style[attribute];
}
//緩速改變元素的屬性（類似緩速移動或者改變大小的動畫效果）
function animate(element, json, fn) {
//使用定時器之前先清除定時器
clearInterval(element.timer);
//使用定時器
element.timer = setInterval(function () {
//開閉思想
var bool = true;
//遍歷json對象 完成每一個屬性的緩速動畫效果
for (var key in json) {
//key作爲屬性名 json[key]作爲目標屬性值
//bug：當頁面使用ctrl+鼠標滾輪進行發大縮小時，
// 會造成獲取getStyle(element, key)獲取的值有小數，
//或者你傳遞進來的數值帶有小數，那麼就可能會造成死循環
//因爲parseInt是向下取整的，所以不能那樣子，只能夠向上取整
var str = getStyle(element, key)
var index = str.indexOf("px");
str = str.slice(0, index);
// 獲取當前的位置
element.leader = Math.ceil(str) || 0;
//獲取步長
element.speed = (json[key] - element.leader) / 10 || 0;
//二次計算步長
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//只要有一個位置不是指距離一步之遙 這麼做事考慮到了小數的情況
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + 'px';
continue;
} else {
bool = false;
}
//進行移動
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1);
if (bool) {
// //直接到達指定目標位置
clearInterval(element.timer);
// //執行完畢後 執行回掉函數
if (fn) {
fn();
}
}
}, 18);
}
</script>
</body>
</html>13.使用封裝的緩速框架來DIY動畫效果：手風琴效果+360開機動畫
◆使用dom簡單封裝的jquery：
/* 功能：顯示元素
* @param element
*/
function show(element) {
element.style.display = "block";
}
/**
* 功能：隱藏元素
* @param element
*/
function hide(element) {
element.style.display = "none";
}
/**
* 功能：最強的緩速移動方法
* 參數：傳遞元素對象、傳遞樣式參數對象、傳遞迴掉函數
* @param element
* @param json
* @param fn
*/
function animate(element, json, fn) {
//使用定時器之前先清除定時器
clearInterval(element.timer);
//使用定時器
element.timer = setInterval(function () {
//開閉思想
var bool = true;
//遍歷json對象 完成每一個屬性的緩速動畫效果
for (var key in json) {
//key作爲屬性名 json[key]作爲目標屬性值
//bug：當頁面使用ctrl+鼠標滾輪進行發大縮小時，
// 會造成獲取getStyle(element, key)獲取的值有小數，
//或者你傳遞進來的數值帶有小數，那麼就可能會造成死循環
//因爲parseInt是向下取整的，所以不能那樣子，只能夠向上取整
//var str = getStyle(element, key)
//var index = str.indexOf("px");
//str = str.slice(0, index);
//element.str= getStyle(element, key).slice(0,getStyle(element, key).indexOf("px"))
// 獲取當前的位置
element.leader = Math.ceil(getStyle(element, key).replace("px", "")) || 0;
//獲取步長
element.speed = (json[key] - element.leader) / 10 || 0;
//二次計算步長
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
////勻速的步長計算
//element.speed = json[key] > element.leader ? 10 : -10;
//只要有一個位置不是指距離一步之遙 這麼做事考慮到了小數的情況
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + 'px';
continue;
} else {
bool = false;
}
//進行移動
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1)
if (bool) {
// //直接到達指定目標位置
clearInterval(element.timer);
// //執行完畢後 執行回掉函數
if (fn) {
fn();
}
}
}, 18);
}
/**
* 功能：垂直方向上緩度滾動到某個位置
* 參數說明：element元素對象 target指定位置
* @param element
* @param target
*/
function scrollAnimateY(element, target) {
//使用定時器之前先清除定時器
clearInterval(element.timer);
//設置定時器
element.timer = setInterval(function () {
//計算步長
element.speed = (target - element.leader) / 10;
//二次計算步長 防止 水永遠取不盡 定時器永遠不停
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//距離是否只剩一步之遙
if (Math.abs(target - element.leader) <= Math.abs(element.speed)) {
window.scrollTo(0, target);
console.log(element.leader);
clearInterval(element.timer);
return;
}
//設置移動的動畫
window.scrollTo(0, element.leader + element.speed);
}, 30);
}
/**
* 功能：水平方向的元素緩速移動的動畫
* @param element
* @param target
*/
function animateX(element, target) {
//綁定計時器之前先清除定時器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetLeft最終獲取的是number類型的值，並且它還會對小數進行四捨五入，
//如果this.style.left中有小數，並且還低於0.5，那麼就會導致offsetLeft每次獲取到的值，
//都是一樣，然後就會造成 盒子不懂，定時器不停的現象發生，所以緩速動畫時要記得給步長取整
// 如果步長>0就向上取整，避免步長小於0.5時出現bug,
// 如果步長<0，就向下取整，避免步長下雨-0.5時出現bug。
//每次移動的步長
element.spend = (target - element.offsetLeft) / 10
//對步長進行取整，避免offsetLeft底層的四捨五入的影響
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目標位置減去當前位置的絕對值 如果小於步長的絕對值 那麼就說明也就一步之遙了，
// 那麼直接移動到指定的位置清除計時器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
element.style.left = target + "px";
clearInterval(element.timer);
return;
}
//重新設置距離左邊的位置
element.style.left = element.offsetLeft + element.spend + "px";
console.log(element.style.left)
}, 30);
}
/**
* 功能：垂直方向的元素緩速移動的動畫
* @param element
* @param target
*/
function animateY(element, target) {
//綁定計時器之前先清除定時器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetTop最終獲取的是number類型的值，並且它還會對小數進行四捨五入，
//如果this.style.Top中有小數，並且還低於0.5，那麼就會導致offsetTop每次獲取到的值，
//都是一樣，然後就會造成 盒子不懂，定時器不停的現象發生，所以緩速動畫時要記得給步長取整
// 如果步長>0就向上取整，避免步長小於0.5時出現bug,
// 如果步長<0，就向下取整，避免步長下雨-0.5時出現bug。
//每次移動的步長
element.spend = (target - element.offsetTop) / 10
//對步長進行取整，避免offsetTop底層的四捨五入的影響
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目標位置減去當前位置的絕對值 如果小於步長的絕對值 那麼就說明也就一步之遙了，
// 那麼直接移動到指定的位置清除計時器算了。
if (Math.abs(target - element.offsetTop) <= Math.abs(element.spend)) {
element.style.top = target + "px";
clearInterval(element.timer);
return;
}
//重新設置距離左邊的位置
element.style.top = element.offsetTop + element.spend + "px";
console.log(element.style.top)
}, 10);
}
/**
* 功能：獲取兼容性的css樣式對象的樣式屬性值
* 其它：可以獲取內嵌式、外鏈式、行內式的樣式對象的樣式屬性值
* @param element
* @returns {*}
*/
//function getStyle(element, attribute) {
// return element.currentStyle ?
// element.currentStyle[attribute] :
// window.getComputedStyle(element, null)[attribute];
//}
function getStyle(element, attribute) {
return (element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute])
||
element.style[attribute];
}
/**
* 功能：用來檢測瀏覽器可視區域的兼容性的client對象
* @returns {{width: (Number|number), height: (Number|number)}}
*/
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
/**
* 功能：獲取scroll對象
* @returns {*}
*/
function scroll() {
/*
*注意事項：
*1.無論有沒有聲明DTD 在IE9及以上的所有瀏覽器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，並且會返回undefined。
*2.在沒有聲明DTD時 在IE9以上的所有瀏覽器都支持document.body.scrollLeft和document.body.scrollTop
* 在聲明瞭DTD時 所有瀏覽器都不支持，並且會返回0
*3.在聲明瞭DTD時 所有瀏覽器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 無論有沒有聲明DTD IE瀏覽器都支持,沒有聲明DTD 其它除了IE瀏覽器外都不支持，並且會返回0。
* */
//判斷是否不爲undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一個關於scroll的對象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否沒有聲明DTD（<!DOCTYPE html>或者其它<html>標籤之上的標記）
//判斷是否是IE瀏覽器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE瀏覽器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果聲明瞭DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精簡版封裝只需要返回 這個就是上面判斷的精簡 效果一樣
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}
/**
* 功能：根據 傳遞參數 返回相應的對象
* 說明：參數爲：#id選擇器、.class選擇器、tag普通選擇器其中一種
* @param str
* @returns {*}
*/
function $(str) {
//獲取頭部選擇符
var head = str.charAt(0);
//去除id選擇器與class選擇器標識後的內容
var body = str.slice(1);
if (head === "#") { //id
return document.getElementById(body);
} else if (head === ".") {//class
return document.getElementsByClassName(body);
} else {//tag
return document.getElementsByTagName(str);
}
}
//******************獲取子元素節點*********開始********//
/**
* 功能：獲取第一個子元素節點
* @param ele
* @returns {Element|*|Node}
*/
function getfirstchild(ele) {
return ele.firstElementChild || ele.firstChild;
}
/**
* 功能：獲取最後一個子元素節點
* @param ele
* @returns {Element|*|Node}
*/
function getlastchild(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：獲取對應索引值的子元素節點
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getchildofindex(ele, index) {
return ele.children[index];
}
/**
* 功能：獲取所有的子元素節點
* @param ele
* @returns {Array}
*/
function getallchild(ele) {
var newArr = [];
var oldArr = ele.children;//childNodes;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i].nodeType === 1) {
newArr.push(oldArr[i]);
}
}
return newArr;
}
//******************獲取子元素節點*********結束********//
//******************獲取兄弟元素節點*********開始********//
/**
* 功能：獲取上一個兄弟元素節點
* @param ele
* @returns {Element|*|Node}
*/
function getpresibling(ele) {
var pre = ele.previousElementSibling || ele.previousSibling;
return pre;
}
/**
* 功能：獲取下一個兄弟元素節點
* @param ele
* @returns {Element|*|Node}
*/
function getnextsibling(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：獲取對應索引值的兄弟元素節點
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getsiblingofindex(ele, index) {
return ele.parentNode.children[index];
}
/**
* 功能：獲取所有的兄弟元素節點（不包括自己）
* @param ele
* @returns {Array}
*/
function getallsibling(ele) {
var newArr = [];
var oldArr = ele.parentNode.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i] != ele) {
newArr.push(oldArr[i]);
//newArr[newArr.length]=oldArr[i];
}
}
return newArr;
}
//******************獲取兄弟元素節點*********結束********//◆手風琴效果：圖片大小爲1226*640
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用封裝的樣式緩速框架製作手風琴</title>
<style type="text/css">
body, ul, li, div {
padding: 0;
margin: 0;
}
.box {
width: 1150px;
height: 400px;
border: 1px solid #b01;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 120%;
}
li {
width: 240px;
height: 400px;
float: left;
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="13.自己封裝的query1.0.0.3.js"></script>
<script>
//需求：動態給每一個li設置背景圖片，當移入到一張圖片上時當前圖片變寬，其它圖片就變窄
//思路：循環給每一個li設置背景，循環遍歷li，當移入一個li時，就循環變窄全部，然後再變寬自己
//注意點：由於是緩速動畫，所以可能會造成抖動的現象
//步驟：
//1.獲取事件源及相關對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關對象
var box = document.getElementsByTagName("div")[0];
var ul = box.children[0];
var liArr = ul.children;
for (var i = 0; i < liArr.length; i++) {
liArr[i].style.background = "url(images/" + (i + 1) + ".jpg) no-repeat scroll left top";
}
//2.綁定事件 使用事件委託的方式
ul.onmouseover = function (event) {
//3.書寫事件驅動程序
//獲取兼容性的事件對象
event = event || window.event;
//獲取兼容性的 事件源對象
var obj = event.target ? event.target : event.srcElement;
if (obj.tagName.toLowerCase() === "li") {
for (var i = this.children.length - 1; i >= 0; i--) {
if (obj !== this.children[i]) {
animate(this.children[i], {width: 100});//先把別的變窄
// this.children[i].style.width = "100px";
} else {
animate(obj, {width: 800});//把移入的li變寬
// obj.style.width = "800px";
}
}
}
console.log(this);
}
ul.onmouseout = function () {
for (var i = 0; i < this.children.length; i++) {
animate(this.children[i], {width: 240});//先把所有恢復原樣
}
}
</script>
</body>
</html>◆360開機動畫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬360開機動畫緩速退出</title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="data:image/jpeg;base64,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" alt=""/>
</div>
<div class="bd" id="b">
<img src="data:image/jpeg;base64,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" alt=""/>
</div>
</div>
<script src="13.自己封裝的query1.0.0.3.js"></script>
<script>
//需求：點擊右上角的x號時，先向下緩慢移動，再向右緩慢移動
//思路：獲取x號，頭部，底部對象，box盒子對象當點擊x號時，
// 底部的高度緩速變成0,整個box寬度緩速變成0
//步驟：
//1.獲取事件源及相關元素對象
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源及相關元素對象
var box = document.body.firstElementChild || document.body.firstChild;
var guanbi = box.children[0];
var hd = box.children[1];
var bd = box.children[2];
//2.綁定事件
guanbi.onclick = function () {
//3.書寫事件驅動程序
animate(bd, {height: 0}, function () {
animate(box, {width: 0});
});
}
</script>
</body>
</html>