#offset
<style>
.father{
border: 1px solid red;
width: 200px;
height: 200px;
/* position: relative; */
}
.son{
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
<div style="position: relative;">
<div class="father">
<div class="son">
</div>
</div>
</div>
<div class="w"></div>
<script>
// offset
var father = document.querySelector(".father")
var son = document.querySelector(".son")
// offsetTop 返回距离最近一个定位的父级元素的距离，如果说没有定位的父级元素，则返回距离body的距离。
console.log(father.offsetTop)
console.log(father.offsetLeft)
console.log(son.offsetTop)
console.log(son.offsetLeft)
// 求自身的大小
console.log(father.offsetWidth)
// offsetWidth = padding + border + width
console.log(father.offsetHeight)
console.log(son.offsetParent) //返回带有定位的上级，如果没有则返回body，是一层一层的向上级查询的
// son.parentNode 这个是返回父级元素
</script>
#offset和style的区别
<style>
.box{
width: 200px;
height: 200px;
background: red;
padding: 10px;
}
</style>
<div class="box" style="width: 200px;"></div>
<script>
var box = document.querySelector(".box")
console.log(box.offsetWidth) //padding + border + width
box.style.width = "300px"
console.log(box.style.width) //字符串样式
// offsetWidth是不能赋值
</script>
#计算鼠标在box盒子中的坐标
<style>
.box{
width: 400px;
height: 400px;
background: yellow;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
box.addEventListener("mousemove",function(e){
var currentX = e.pageX
var currentY = e.pageY
var x = currentX - this.offsetLeft
var y = currentY - this.offsetTop //获取到了鼠标在box内的坐标
this.innerHTML = "X轴" + x + " Y轴" + y
})
</script>
#client
<style>
.son{
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector(".son")
console.log(son.clientWidth)
console.log(son.clientHeight) // 不带边框的宽度 = padding + width
console.log(son.clientTop) // 打印出的是边框的宽度 上边框的宽度
console.log(son.clientLeft) // 下边框的宽度
</script>
#offset案例
<style>
.box{width: 200px;
height: 200px;
background: red;
position: relative;}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
box.addEventListener("mousedown", function(e){
var x = e.pageX - box.offsetLeft
var y = e.pageY - box.offsetTop
function move(e){
box.style.left = e.pageX - x + "px"
box.style.top = e.pageY - y + "px"
}
document.addEventListener("mousemove", move)
document.addEventListener("mouseup", function(){
document.removeEventListener("mousemove", move)
})
})
</script>
#scroll家族
<style>
div{
width: 300px;
height: 300px;
border: 2px solid red;
overflow: auto;
}
</style>
<div>
第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一天下第一
</div>
<script>
// scroll滚动
var div = document.querySelector("div")
console.log(div.scrollHeight) // 滚动区域(滚动区域的高度)
console.log(div.scrollWidth)
// 连续触发事件，只要滚动了滚轴就触发
div.addEventListener("scroll",function(){
// console.log("滚动了")
console.log(div.scrollTop) // 卷到上面里面的高度
})
</script>
#滚动导航定位
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
height: 80px;
background: #999;
font-size: 0;
}
ul li{
list-style-type: none;
display: inline-block;
text-align: center;
width: calc(100%/3);
height: 80px;
line-height: 80px;
font-size: 20px;
}
</style>
<ul>
<li>首页</li>
<li>列表</li>
<li>我的</li>
</ul>
<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>
<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>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
<p>天下第一</p>
</div>
<script>
var ul = document.querySelector("ul")
document.addEventListener("scroll",function(){
// console.log("滚动了")
// 通过这样的方式来获取窗口卷进去的距离
console.log(window.pageYOffset)
if(window.pageYOffset > 80){
ul.style.position = "fixed"
ul.style.top = "0px"
}else{
ul.style.position = ""
ul.style.top = "0px"
}
})
</script>
#mouseover
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.son{
width: 100px;
height: 100px;
background: pink;
margin: 0 auto;
}
</style>
<div class="father">
<div class="son">
</div>
</div>
<script>
var father = document.querySelector(".father")
var son = document.querySelector(".son")
// onmouseover 如果盒子里面有子盒子，鼠标放到子盒子上面，也会触发盒子的onmouseover
// onmouseover:鼠标移进时
// onmouseout:鼠标出局
// onmouseenter:鼠标进入
// onmouseleave:鼠标离开
// father.onmouseover = function(){
// console.log("放到了father上面")
// }
// 进入father只会触发一次 对father里面的子元素进出，不会触发mouseenter
father.onmouseenter = function(){
console.log("放到了father上面")
}
</script>
#动画
<style>
.box{
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<div class="box"></div>
<script>
// 获取box dom元素
// left增加
// setInterval
// left400
// clearInterval
var box = document.querySelector(".box")
var left = 0;
// 均速运动
var timer = setInterval(function(){
left += 4;
if(left >= 400){
clearInterval(timer)
}
box.style.left = left + "px"
},10)
</script>
#封装动画函数
<style>
div{
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<div></div>
<script>
var div = document.querySelector("div")
function animate(dom, target){
var timer = setInterval(function(){
if(dom.offsetLeft >= target){
clearInterval(timer)
}
dom.style.left = dom.offsetLeft + 1 + "px"
},30)
}
animate(div,300)
</script>
#对象上的定时器
<style>
.div1{
width: 100px;
height: 100px;
background: red;
position: relative;
}
.div2{
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<script>
var div1 = document.querySelector(".div1")
var div2 = document.querySelector(".div2")
function animate(dom, target, time){
dom.timer = setInterval(function(){
if(dom.offsetLeft >= target){
clearInterval(dom.timer)
}
dom.style.left = dom.offsetLeft + 1 + "px"
},time)
}
animate(div1,300,50)
animate(div2,500,30)
</script>
