概念
bom browser object model 提供与浏览器相关操作接口
封装的兼容性函数
<!-- 获取浏览器视口宽高 -->
function getViewportOffset() {
if(window.innerWidth) {
return {
width: window.innerWidth,
height: window.innerHeight
}
} else {
//ie8及以下,分标准模式和混杂模式,混杂模式即是用老版本浏览器语法渲染代码
if(document.compatMode == "BackCompat") {
return {
width: document.body.clientWidth,
height: document.body.clientHight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHight
}
}
}
}
<!-- 获取元素相对文档的距离 -->
function getElementPosition(target) {
//target.offsetParent 最近的有定位的父元素,如无则返回body元素
if (target.offsetParent == document.body) {
return {
x: target.offsetLeft,
y: target.offsetTop
}
} else {
return {
x: target.offsetLeft + getElementPosition(target.offsetParent).x,
y: target.offsetTop + getElementPosition(target.offsetParent).y
}
}
}
<!-- 求滚动条滚动距离 -->
function getScrollOffset() {
if(window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
//ie8及以下,document.body.scrollLeft与document.documentElement.scrollLeft必有一为值,一为0
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
控制窗口滚动
window.scroll(0, 100) 滚动条滚动100
window.scrollBy(0, -10) 滚动条累加滚动-10
利用这两个特性,可以做小说自动阅读功能,js部分代码如下:
var start = document.getElementsByClassName("start")[0];
var stop = document.getElementsByClassName("stop")[0];
var key = false;
start.onclick = function () {
if(key == false) {
//需为全局变量,要不然离开该函数执行环境后引用timer找不到
timer = setInterval(function() {
window.scrollBy(0, 10);
}, 100);
}
key = true;
}
stop.onclick = function () {
if(key == true) {
clearInterval(timer);
key = false;
}
}