JSAP106
一、clientX、clientY
點擊位置距離當前body可視區域的x，y坐標
二、pageX、pageY
對于整個頁面來說，包括了被卷去的body部分的長度
三、screenX、screenY
點擊位置距離當前電腦屏幕的x，y坐標
四、offsetX、offsetY
相對于帶有定位的父盒子的x，y坐標
五、x、y和screenX、screenY一樣
window.pageXOffset
整數只讀屬性，表示X軸滾動條向右滾動過的像素數（表示文檔向右滾動過的像素數）。IE不支持該屬性，使用body元素的scrollLeft屬性替代。
window.pageYoffset
整數只讀屬性，表示Y軸滾動條向下滾動過的像素數（表示文檔向下滾動過的像素數）。IE不支持該屬性，使用body元素的scrollTop屬性替代。
1、目標：
jQuery中的頂級對象$–jQuery
2、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);}
3、獲取元素計算后的樣式屬性值
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>//點擊按鈕移動divmy$("btn1").onclick = function () {//獲取div此時left的當前位置,達到目標400// animate(my$("dv"),"left",400);//獲取div此時的寬度,達到目標200animate(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);//清理定時器//定時器,返回的是定時器的idelement.timeId = setInterval(function () {var flag = true;//默認,假設,全部到達目標//遍歷json對象中的每個屬性還有屬性對應的目標值for (var attr in json) {//判斷這個屬性attr中是不是opacityif (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);//清理定時器//定時器,返回的是定時器的idelement.timeId = setInterval(function () {var flag = true;//默認,假設,全部到達目標//遍歷json對象中的每個屬性還有屬性對應的目標值for (var attr in json) {//判斷這個屬性attr中是不是opacityif (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的高漸漸的變成0animate(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標簽的內容：
4、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>
轉載于:https://www.cnblogs.com/Tanqurey/p/10485290.html
總結
以上是生活随笔為你收集整理的JSAP106的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
