JSAP106
JSAP106
1、clientX、clientY
點擊位置距離當前body可視區域的x，y座標javascript
2、pageX、pageY
對於整個頁面來講，包括了被捲去的body部分的長度css
3、screenX、screenY
點擊位置距離當前電腦屏幕的x，y座標html
4、offsetX、offsetY
相對於帶有定位的父盒子的x，y座標java
5、x、y和screenX、screenY同樣web
window.pageXOffsetjson
整數只讀屬性，表示X軸滾動條向右滾動過的像素數（表示文檔向右滾動過的像素數）。IE不支持該屬性，使用body元素的scrollLeft屬性替代。數組
window.pageYoffset瀏覽器
整數只讀屬性，表示Y軸滾動條向下滾動過的像素數（表示文檔向下滾動過的像素數）。IE不支持該屬性，使用body元素的scrollTop屬性替代。ide
一、目標：
jQuery中的頂級對象$–jQuerysvg
二、scroll系列
.scrollWidth/Height
元素中內容的實際的寬度/高度，均沒有邊框；若元素中沒有內容或內容不足元素的高，返回元素的寬/高
.scrollLeft/Top
向左/上被捲曲（被隱藏）的內容的長度
實時獲取div向上捲曲的值
div的滾動事件：對象.onscroll
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
border: 1px red solid;
height: 100px;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="dv">
麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司
麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司
麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司
麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司
麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司麻辣壽司
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("dv").onscroll = function () {
console.log(this.scrollTop);
};
</script>
</body>
//固定導航欄案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>
//獲取頁面向上或者向左捲曲出去的距離的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滾動事件
window.onscroll=function () {
//向上捲曲出去的距離和最上面的div的高度對比
if(getScroll().top>=my$("topPart").offsetHeight){
//設置第二個div的類樣式
my$("navBar").className="nav fixed";
//設置第三個div的marginTop的值
my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
}else{
my$("navBar").className="nav";
my$("mainPart").style.marginTop="10px";
}
};
</script>
<script>
//獲取瀏覽器向上捲曲出去的距離的值,向左捲曲出去的距離
// function getScroll() {
// var obj={};
// var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.left=left;
// obj.top=top1;
// return obj;
//
// }
// function getScroll() {
// var obj={};
// obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// return obj;
//
// }
// function getScroll() {
// var obj = {
// left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
// top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
// };
// return obj;
//
// }
//瀏覽器的滾動事件
// window.onscroll=function () {
//console.log(getScroll().top);
// };
//向上捲曲出去的距離
</script>
</body>
</html>
獲取瀏覽器向上/左捲曲的距離值？
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft
|| document.body.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0
};
}
//向上捲曲出去的距離，有三種方法，不一樣瀏覽器的支持種類不盡相同，須要寫兼容性代碼
// var scrollTop1 = window.pageYOffset;
// var scrollTop1 = document.documentElement.scrollTop;
// var scrollTop1=window.body.scrollTop;
//向左捲曲的值同理，將上述的TOP換位Left便可
</script>
<script>
//筋斗雲案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
body {
background-color: #333;
}
.nav {
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) right center no-repeat;
background-color: #fff;
border-radius: 10px;
position: relative;
}
.nav li {
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.nav span {
position: absolute;
top: 0;
left: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
ul {
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校區</li>
<li>上海校區</li>
<li>廣州校區</li>
<li>深圳校區</li>
<li>武漢校區</li>
<li>關於咱們</li>
<li>聯繫咱們</li>
<li>招賢納士</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//勻速動畫
function animate(element, target) {
//清理定時器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//獲取元素的當前位置
var current = element.offsetLeft;
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定時器
clearInterval(element.timeId);
}
//測試代碼:
console.log("目標位置:" + target + ",當前位置:" + current + ",每次移動步數:" + step);
}, 20);
}
//獲取雲彩
var cloud = my$("cloud");
//獲取全部的li標籤
var list = my$("navBar").children;
//循環遍歷分別註冊鼠標進入,鼠標離開,點擊事件
for (var i = 0; i < list.length; i++) {
//鼠標進入事件
list[i].onmouseover = mouseoverHandle;
//點擊事件
list[i].onclick = clickHandle;
//鼠標離開事件
list[i].onmouseout = mouseoutHandle;
}
function mouseoverHandle() {//進入
//移動到鼠標這次進入的li的位置
animate(cloud, this.offsetLeft);
}
//點擊的時候,記錄這次點擊的位置
var lastPosition = 0;
function clickHandle() {//點擊
lastPosition = this.offsetLeft;
}
function mouseoutHandle() {//離開
animate(cloud, lastPosition);
}
</script>
</body>
</html>
//變速動畫封裝
//勻速動畫
function animate(element, target) {
//清理定時器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//獲取元素的當前位置
var current = element.offsetLeft;
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定時器
clearInterval(element.timeId);
}
//測試代碼:
console.log("目標位置:" + target + ",當前位置:" + current + ",每次移動步數:" + step);
}, 20);
}
三、獲取元素計算後的樣式屬性值
offsetLeft返回的結果不必定都是對的
函數：
window.getComputedStyle(…)
兩個參數分別是元素和僞類（可傳Null）
將返回一個對象CSSStyleDeclaration,包含全部的CSS屬性。利用此方式獲取某一元素的CSS樣式屬性值很是地準確，ie8不支持
.currentStyle
支持ie8
其返回的屬性的都是字符串類型
兼容性代碼：
unction getStyle(element,attr) {
//判斷瀏覽器是否支持這個方法
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
案例：封裝緩動動畫增長任意一個屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<input type="button" value="移動到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
//點擊按鈕移動div
my$("btn1").onclick = function () {
//獲取div此時left的當前位置,達到目標400
// animate(my$("dv"),"left",400);
//獲取div此時的寬度,達到目標200
animate(my$("dv"),"width",200);
};
//獲取任意的一個屬性的當前的屬性值: left--->此時的left屬性的值,width---當前的元素的寬
function getStyle(element,attr) {
//判斷瀏覽器是否支持這個方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//勻速動畫
//element---元素
//attr---屬性名字
//target---目標位置
function animate(element,attr ,target) {
//清理定時器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//獲取元素的當前位置
var current = parseInt(getStyle(element,attr));//數字類型//===============================
//移動的步數
var step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
element.style[attr] = current + "px";//============================================
if(current==target) {
//清理定時器
clearInterval(element.timeId);
}
//測試代碼:
console.log("目標位置:"+target+",當前位置:"+current+",每次移動步數:"+step);
}, 20);
}
</script>
</div>
</body>
</html>
案例：緩動動畫追加任意多個屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值
//獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默認,假設,所有到達目標
for(var attr in json){
//獲取元素這個屬性的當前的值
var current=parseInt(getStyle(element,attr));
//當前的屬性對應的目標值
var target=json[attr];
//移動的步數
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移動後的值
element.style[attr]=current+"px";
if(current!=target){
flag=false;
}
}
if(flag){
//清理定時器
clearInterval(element.timeId);
}
//測試代碼
console.log("目標:"+target+",當前:"+current+",每次的移動步數:"+step);
},20);
}
my$("btn1").onclick=function () {
animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80});
};
</script>
</body>
</html>
//添加回調函數
//添加回調函數能夠一次性嵌套多個動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值
//獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素
//json---對象---多個屬性及多個目標值
//fn---函數
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默認,假設,所有到達目標
for(var attr in json){
//獲取元素這個屬性的當前的值
var current=parseInt(getStyle(element,attr));
//當前的屬性對應的目標值
var target=json[attr];
//移動的步數
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移動後的值
element.style[attr]=current+"px";
if(current!=target){
flag=false;
}
}
if(flag){
//清理定時器
clearInterval(element.timeId);
//全部的屬性到達目標才能使用這個函數,前提是用戶傳入了這個函數
if(fn){
fn();
}
}
//測試代碼
console.log("目標:"+target+",當前:"+current+",每次的移動步數:"+step);
},20);
}
my$("btn1").onclick=function () {
var json1={"width":400,"height":500,"left":500,"top":80};
animate(my$("dv"),json1,function () {
var json2={"width":40,"height":50,"left":50,"top":800};
animate(my$("dv"),json2,function () {
var json3={"width":450,"height":550,"left":550,"top":600};
animate(my$("dv"),json3);
});
});
};
</script>
</body>
</html>
//動畫函數增長透明度以及層級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
input {
z-index: 10;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移動到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值
//獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定時器
//定時器,返回的是定時器的id
element.timeId = setInterval(function () {
var flag = true;//默認,假設,所有到達目標
//遍歷json對象中的每一個屬性還有屬性對應的目標值
for (var attr in json) {
//判斷這個屬性attr中是否是opacity
if (attr == "opacity") {
//獲取元素的當前的透明度,當前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目標的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判斷這個屬性attr中是否是zIndex
//層級改變就是直接改變這個屬性的值
element.style[attr] = json[attr];
} else {
//普通的屬性
//獲取元素這個屬性的當前的值
var current = parseInt(getStyle(element, attr));
//當前的屬性對應的目標值
var target = json[attr];
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的值
element.style[attr] = current + "px";
}
//是否到達目標
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定時器
clearInterval(element.timeId);
//全部的屬性到達目標才能使用這個函數,前提是用戶傳入了這個函數
if (fn) {
fn();
}
}
//測試代碼
console.log("目標:" + target + ",當前:" + current + ",每次的移動步數:" + step);
}, 20);
}
//zIndex:1000
//透明度: 數字類型----小數---放大100倍
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
});
};
</script>
</body>
</html>
案例：手風琴
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定時器
//定時器,返回的是定時器的id
element.timeId = setInterval(function () {
var flag = true;//默認,假設,所有到達目標
//遍歷json對象中的每一個屬性還有屬性對應的目標值
for (var attr in json) {
//判斷這個屬性attr中是否是opacity
if (attr == "opacity") {
//獲取元素的當前的透明度,當前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目標的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判斷這個屬性attr中是否是zIndex
//層級改變就是直接改變這個屬性的值
element.style[attr] = json[attr];
} else {
//普通的屬性
//獲取元素這個屬性的當前的值
var current = parseInt(getStyle(element, attr));
//當前的屬性對應的目標值
var target = json[attr];
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的值
element.style[attr] = current + "px";
}
//是否到達目標
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定時器
clearInterval(element.timeId);
//全部的屬性到達目標才能使用這個函數,前提是用戶傳入了這個函數
if (fn) {
fn();
}
}
//測試代碼
console.log("目標:" + target + ",當前:" + current + ",每次的移動步數:" + step);
}, 20);
}
//先獲取全部的li標籤
var list = my$("box").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//鼠標進入
list[i].onmouseover = mouseoverHandle;
//鼠標離開
list[i].onmouseout = mouseoutHandle;
}
//進入
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 100});//動畫效果
}
animate(this, {"width": 800});
}
//離開
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 240});//動畫效果
}
}
</script>
</body>
</html>
//案例：開機動畫
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="bottomPart">
<img src="images/b.jpg" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
my$("closeButton").onclick=function () {
//設置最下面的div的高漸漸的變成0
animate(my$("bottomPart"),{"height":0},function () {
animate(my$("box"),{"width":0});
});
};
</script>
</body>
</html>
//旋轉木馬案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋轉木馬輪播圖</title>
<link rel="stylesheet" href="css/css.css"/>
<script src="common.js"></script>
<script>
//
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//頁面加載的事件
window.onload = function () {
var flag=true;//假設全部的動畫執行完畢了---鎖====================================================
var list = my$("slide").getElementsByTagName("li");
//1---圖片散開
function assign() {
for (var i = 0; i < list.length; i++) {
//設置每一個li,都要把寬,層級,透明度,left,top到達指定的目標位置
animate(list[i], config[i],function () {
flag=true;//===============================================
});
}
}
assign();
//右邊按鈕
my$("arrRight").onclick = function () {
if(flag){//==========================================================
flag=false;
config.push(config.shift());
assign();//從新分配
}
};
//左邊按鈕
my$("arrLeft").onclick = function () {
if(flag){//==================================================
flag=false;
config.unshift(config.pop());
assign();
}
};
//鼠標進入,左右焦點的div顯示
my$("slide").onmouseover = function () {
animate(my$("arrow"), {"opacity": 1});
};
//鼠標離開,左右焦點的div隱藏
my$("slide").onmouseout = function () {
animate(my$("arrow"), {"opacity": 0});
};
};
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
</html>
arr.push(arr.shift())//有轉換順序的做用，把數組內第一個元素移到數組末尾
arr.unshift(arr.pop())//把數組中最後一個元素提到第一個的位置
a標籤的內容：
四、client系列屬性
offsetParent
可視區域，標籤中能夠看獲得的區域
.clientWidth //可視區域的寬，不包括邊框
,clientHeight //可視區域的高，不包括邊框
.clientLeft //左邊框的寬度，與margin無關
.clientTop//上邊框的寬度
//案例：圖片跟着鼠標飛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
img {
position: absolute;
}
body{
height: 2000px;
}
</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
document.onmousemove = function (e) {
my$("im").style.left = e.pageX + "px";//相對於頁面頂部的座標，ie8不支持，要改用捲曲區域和可視區域相加的方式，略
my$("im").style.top = e.pageY + "px";
};
</script>
</body>
</html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
