{{msg}}
这里有个 带 hover 效果的登录界面,需要靠 client、offset 先判定进入盒子的位置,再配合生成 js 动画。
这里还有一个案例(面试题): 手写一个可拖拽的 div ,拖拽 div 时需要 clientX、clientY 实时更新 div 的坐标。
元素调用时:
body/html 调用时:
声明:
clientWidth
和 clientHeight
属性是只读的,不可修改。clientWidth
和 clientHeight
的值都是不带 px 的,返回的都是一个数字,可以直接进行计算。event调用:
offsetTop/offsetLeft:
scrollTop/scrollLeft:
clientY/clientX:
函数封装如下:
//函数封装:获取屏幕可视区域的宽高
function client() {
if (window.innerHeight !== undefined) {
//ie9及其以上的版本的写法
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
//标准模式的写法(有DTD时)
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
//没有DTD时的写法
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
案例:根据浏览器的可视宽度,给定不同的背景的色。
PS:这个可以用来做响应式。
代码如下:(需要用到上面的封装好的方法)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="tools.js"></script>
<script>
//需求:浏览器每次更改大小,判断是否符合某一标准然后给背景上色。
// // >960红色,大于640小于960蓝色,小于640绿色。
window.onresize = fn; //页面大小发生变化时,执行该函数。
//页面加载的时候直接执行一次函数,确定浏览器可视区域的宽,给背景上色
fn();
//封装成函数,然后指定的时候去调用和绑定函数名
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "red";
} else if (client().width > 640) {
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
上当代码中,window.onresize
事件指的是:在窗口或框架被调整大小时发生。各个事件的解释如下:
比如,我的电脑的显示器分辨率是:1920*1080。
获取显示器的分辨率:
window.onresize = function () {
document.title = window.screen.width + " " + window.screen.height;
}
显示效果:
上图中,不管我如何改变浏览器的窗口大小,title栏显示的值永远都是我的显示器分辨率:1920*1080。