Offset ‘自己的’的意思
1、offsetWidth 自己的宽度 offsetHeight 自己的高度；
width+padding+border;
div width=200px;border=3px;padding-right=15px;
div offsetWidth=200+6+15=221;
offsetWidth和div.style.width的区别
div.style.width获取到的是字符串，并且可以进行修改
2、offsetWidth获取到的是数值类型，只能获取，不能修改；
offsetLeft 获取div距离最近的带有定位的父级，相当于是左边距；
3、offsetParent 返回自己的父亲元素（带有定位的）；
如果所有父级都没有定位，则返回body
和parentnNode区别，parentNode返回父亲，不管是否带有定位；
4、event事件
div.onclick=function(event){},这个envent就是它点击的时候，浏览器所执行的所有事件；
pageX、pageY 距离文档的X轴距离
clientXc、clientY 距离浏览器可见区域的X轴距离；
screenX、screenY 距离屏幕。超出了浏览器；
Scroll 家族
Offset家族 自己的
Scroll 滚动家族
scrollTop 被卷去的头部
它就是当你滑轮滚动浏览网页隐藏在屏幕上方的距离
页面滚动事件：
Window.onscroll=function（）{执行语句}；
谷歌浏览器，以及：没有声明DTD（<!DOCTYPE html>）的浏览器（怪异模式）：
document.body.scrollTop;//仅限谷歌以及怪异模式浏览器、
火狐以及其他浏览器:
document.documentElement.scrollTop;
iE9以上++++++++++++++++++:
var scrollTop=document.body.scrollTop ||
document.documentElement.scrollTop ||
window.pageYOffset; //兼容性写法
JSON ***********************************************
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，我们称之为javascript对象表示法，使用json进行传输数据是很常用的
Json就是javascript
Json其实很像我们学过的CSS条
var myjson={k:v,k:v,k:v…..} json用键值对的方法表示 key:value
封装自己的scroll；
scrollTo(x,y)
使当前页面跳转到（x,y）这个坐标
window.scrollTo(0,500);
格式：window.scroll(Xpos,Ypos);
两个值一个都不能省略，不想跳给个0都行，就是不能少
Xpos 必须，想要跳转的X轴的位置
Ypos 必须，想要跳转的Y轴的位置
Xpos一般用不上，给个0就行，因为一般大部分网页水平滚动条是不让出现的
demo 固定缓动菜单栏
<style>
*{
margin: 0;
padding: 0;
}
img{
position: absolute;
left: 0;
top: 100px;
}
.cur{
height: 3000px;
}
</style>
<div class="cur"></div>
<script src="JavaScript/base.js"></script>
<script>
var img = document.getElementById("img");
var timer = null;
var leader = 0, target = 0;
window.onscroll = function(){
clearInterval(timer);
target = scroll().top + 100;
timer = setInterval(function(){
leader = leader + (target - leader) /10;
img.style.top = leader + "px";
},50)
}
</script>
demo 点击缓动规定位置
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
position: fixed;
top: 0;
left: 100px;
}
.box div{
width: 50px;
height: 50px;
border: 1px solid yellow;
cursor: pointer;
}
.box .tp{
border-top: none;
}
.one,.b1{
background: pink;
}
.two,.b2{
background: cornflowerblue;
}
.three,.b3{
background: cyan;
}
.four,.b4{
background: cornsilk;
}
.five,.b5{
background: orchid;
}
.cur{
width: 100%;
height: 100%;
}
.cur div{
font-size: 30px;
width: 100%;
height: 100%;
}
</style>
<div class="box" id="box">
<div class="one" >首页</div>
<div class="two tp" >商城</div>
<div class="three tp" >关于</div>
<div class="four tp" >我的</div>
<div class="five tp">收藏</div>
</div>
<div class="cur" id="cur">
<div class="a b1">首页</div>
<div class="a b2">商城</div>
<div class="a b3">关于</div>
<div class="a b4">我的</div>
<div class="a b5">收藏</div>
</div>
<script>
function $(id){ // 获取 id
return document.getElementById(id);
}
var box = document.getElementById("box");
var cur = document.getElementById("cur");
var divs = box.getElementsByTagName("div");
var divs2 = cur.getElementsByTagName("div");
var timer = null;
var leader = 0,target = 0;
for(var i = 0;i<divs.length;i++){
divs[i].index = i; //通过创建index属性，赋予每一个 divs 一个索引号
divs[i].onclick = function(){
clearInterval(timer);
target = divs2[this.index].offsetTop; //通过索引值，获取 divs2 的offsetTop
timer=setInterval(function(){
leader=leader+(target-leader)/10;
window.scrollTo(0,leader);//屏幕滑动
if(Math.round(leader)==target){//当启始值等于目标值，就表示到达目的了，就清除计时器
clearInterval(timer);
}
},30);
}
}
</script>
网友评论