JavaScript图片显示

核心提示： 一系列获取当前页面或窗口相关长宽和位置的并具有兼容性的函数Code//获取页面宽度functionpageWidth(){returndocument.body.scrollWidth;}//获取页面高度functionpageHeight(){returndocument.body.sc

一系列获取当前页面或窗口相关长宽和位置的并具有兼容性的函数

Code

//获取页面宽度
functionpageWidth(){
　　returndocument.body.scrollWidth;
}
//获取页面高度
functionpageHeight(){
　　returndocument.body.scrollHeight;
}
//获取浏览器视口高度
functionwindowHeight(){
　　varde=document.documentElement;
　　returnself.innerHeight||(de&&de.clientHeight)||document.body.clientHeight;
}
//获取浏览器视口宽度
functionwindowWidth(){
　　varde=document.documentElement;
　　returnself.innerWidth||(de&&de.clientWidth)||document.body.clientWidth;
}
//获取当前向右卷动的长度
functionscrollX(){
　　varde=document.documentElement;
　　returnself.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
//获取当前像下卷动的长度
functionscrollY(){
　　varde=document.documentElement;
　　returnself.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}

getCenterPos函数：通过传入长宽值获取中心位置的left和top值

Code

functiongetCenterPos(w,h){
　　returnnewArray((scrollX()+(windowWidth()-w)/2),(scrollY()+(windowHeight()-h)/2));
}

第三步：代码实现

工具都准备得差不多了，开始进入主体编码阶段，首先要创建我们需要的html结构（前文提到的页面元素），并将其添加到body元素的末尾。