client家族 / offset家族 / scroll家族
案例：返回头部的小火箭
案例：进度条
案例：放大镜
js盒模型属性
-
client
- width
- height
- top
- left
-
内容的宽/高+左右/上下padding（和内容是否溢出没有关系）(即不包含border值)
-
如果设置了box-sizing:border-box; 则clientWidth/clientHeight =容器宽/高- border
-
左/上边框的宽度 （border[Left/Top]Width）
-
offset
- width
- height
- top
- left
- offsetParent
offsetLeft 指的是元素与offsetParent之间的距离
首先确定offsetParent
IE8+和高级浏览器
- 假如祖先元素中都没有定位，offsetParent就是body元素,假如祖先元素有定位，则以最近的带有定位的祖先元素为准,与自己是否定位无关
IE6 / 7浏览器
- 自身没有定位，参考的是最近的有宽高的祖先元素，没有宽高参考的是body
- 自身有定位 与高级浏览器一致
offsetLeft
IE9+和高级浏览器，IE6/7
- 元素自身的左边框外部到offsetParent左边框内部的距离
IE8
- 比高版本浏览器的offsetLeft多一个offsetParent边框
如何对offsetLeft做兼容？
- 自身元素定位 祖先无边框
-
scroll
- width
- height
- top
- left
-
scrollWidth/scrollHeight . 容器中内容没有溢出的情况下：和我们的clientWidth/clientHeight一模一样
- 如果容器中内容有溢出，获取的结果如下规则：
-
scrollWidth：真实内容的宽度（包含溢出）+左padding
-
scrollHeight：真实内容的高度（包含溢出）+上padding
-
获取到的结果都是“约等于”的值，因为：1. 同一个浏览器，我们是否设置erflow=“hidden”，对于最终的结果是有影响的（滚动条也占据宽度会影响）； 2. 在不同的浏览器中我们获取到的结果也是不相同的
-
- scrollLeft/scrollTop
- 滚动条卷去的宽度/高度
client家族 / offset家族 / scroll家族
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
padding: 15px;
border: 20px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div class="box" id="box">
1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg
1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg
1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg 1111111111111324234324gfsgsgfgsfg
</div>
<script type="text/javascript">
// clientWidth 可视区域的宽度 width+左右padding 与内容是否溢出无关
//在控制台输入 box.clientWidth可以查看。 clientWidth = width + 2*padding
// clientHeight 可视区域的高度 width+上下padding 与内容是否溢出无关
// clientTop 上边框的宽度
// clientTop = border
//clientLeft 左边框的宽度
// clientLeft = border
// ————————————————————————————————————————————————————————————————————————
// offsetWidth 左右border+左右padding+width
// ......Height .... 上下border+上下padding+height
//-----------------------------------------------------------------------
// scrollWidth 左padding+内容真实的宽度
// ......Height 上padding+内容真实的高度
</script>
</body>
</html>
返回上层目录
offsetparent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 400px;
height: 400px;
border: 10px solid red;
padding: 50px;
}
.box2 {
width: 260px;
height: 260px;
border: 10px solid green;
padding: 50px;
/*position: relative;*/
}
.box3 {
width: 160px;
height: 160px;
border: 10px solid blue;
padding: 50px;
/*position: relative;*/
}
p {
width: 80px;
height: 80px;
border: 20px solid purple;
position: relative;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p id="op"></p>
</div>
</div>
</div>
<script type="text/javascript">
var op = document.getElementById("op");
alert(op.offsetParent); // body
</script>
</body>
</html>
返回上层目录
返回头部的小火箭
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
.top {
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}
</style>
</head>
<body>
<div id="gotop" class="top">
<img src="images/Top.jpg" alt="" />
</div>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
</body>
</html>
<script type="text/javascript">
var gt = document.querySelector("#gotop");
onscroll = function() {
// 获取页面被卷的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 0) {
gt.style.display = "block";
} else {
gt.style.display = "none";
}
}
gt.onclick = function() {
if (document.documentElement) {
document.documentElement.scrollTop = 0;
return;
}
document.body.scrollTop = 0;
}
</script>
返回上层目录
进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.progress {
margin: auto;
width: 200px;
height: 20px;
border: thin dotted darkgreen;
position: relative;
top: 200px;
}
.fillDiv {
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 20px;
background-color: green;
}
#percent {
position: absolute;
left: 206px;
top: 0;
}
</style>
</head>
<body>
<div class="progress" id="progress">
<div class="fillDiv" id="fillDiv"></div>
<span id="percent">0</span>
</div>
<script type="text/javascript">
// 思路 不断改变fillDiv的宽度
function $(id) {
return document.getElementById(id);
}
var timer = setInterval(function() {
$("fillDiv").style.width = $("fillDiv").clientWidth + 2 + "px";
var percent = parseInt(100 * ($("fillDiv").clientWidth / $("progress").clientWidth)) + "%";
$("percent").innerHTML = percent;
// 取消定时器
if (fillDiv.clientWidth >= 200) {
clearInterval(timer);
}
}, 10);
</script>
</body>
</html>
返回上层目录
放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left:0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="box" >
<div id="small"><!--小图区-->
<img src="001.jpg" alt="" />
<div id="mask"></div><!--遮罩层-->
</div>
<div id="big"><!--大图区-->
<img src="0001.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var box = $("box");
var small = $("small");
var mask = $("mask");
var big = $("big");
var bigImg = $("bigImg");
// 鼠标移入到小图区域 mask和big显示
small.onmouseover = function() {
mask.style.display = "block";
big.style.display = "block";
}
// 鼠标移出小图区域 mask和big隐藏
small.onmouseout = function() {
mask.style.display = "none";
big.style.display = "none";
}
// 鼠标在小图区域移动 让mask移动
small.onmousemove = function(e) {
var e = e || window.event;
var x = e.pageX - box.offsetLeft - mask.offsetWidth/2;
var y = e.pageY - box.offsetTop - mask.offsetHeight/2;
// 得到mask位置最大值
var maxX = box.clientWidth - mask.clientWidth;
var maxY = box.clientHeight - mask.clientHeight;
x = x < 0? 0: (x > maxX ? maxX : x);
y = y < 0? 0: (y > maxY ? maxY : y);
mask.style.left = x + "px";
mask.style.top = y + "px";
// 小图片宽度：大图片宽度 = x: 大图片位置
var bigImgLeft = -x*bigImg.offsetWidth/small.offsetWidth;
var bigImgTop = -y*bigImg.offsetHeight/small.offsetHeight;
// 设置大图片移动位置
bigImg.style.left = bigImgLeft + "px";
bigImg.style.top = bigImgTop + "px";
}
</script>
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
