一、模拟垂直滚动条
重点在计算，思考滚动条的移动距离和盒子中内容的关系！
滚动条移动一像素，内容移动多少？ = 多出来内容高度/滚动条剩余高度 *滚动条移动距离
var bigbox = document.getElementById("bigbox");
var content = bigbox.children[0];
var scroll = bigbox.children[1];
var box = scroll.children[0];
var boxheight = bigbox.offsetHeight/content.offsetHeight * bigbox.offsetHeight; //滚动条的高度 = 滚动条所在盒子高度/内容高度 * 滚动条盒子高度
box.style.height = boxheight+"px";
tuodong(box,content);
function tuodong(obj,target){
obj.onmousedown = function(event) {
var event = event || window.event;
var t = event.clientY - this.offsetTop;//滚动条本身距离屏幕上的高度
var that = this;//that位置定义错误
document.onmousemove = function(event) {
var event = event || window.event;
var boxtop = event.clientY - t;// 滚动条距离父盒子的高（移动距离）
var contentTop = (target.offsetHeight - bigbox.offsetHeight) / (bigbox.offsetHeight - that.offsetHeight) * boxtop;//（内容的高度 = 内容的高度-盒子的高度 / 盒子高度-滚动条高度 ）(这是个倍数)* 滚动条移动距离
if(boxtop < 0){
boxtop = 0;
}
else if (boxtop > scroll.offsetHeight - that.offsetHeight) {
boxtop = scroll.offsetHeight - that.offsetHeight;
}
else {
target.style.top = -contentTop +"px";
}
that.style.top = boxtop +'px';
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
- Html基本结构访问方法
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;
二、scroll家族
Offset 自己的 偏移
scroll 滚动的
- scrollTop scrollLeft
scrollTop 被卷去的头部 就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
事件：window.onscroll = function() { 页面滚动语句 }
兼容写法：
var scrollTop = window.pageYOffset（ ie9+ 和 最新浏览器 都认识） || document.documentElement.scrollTop （火狐 和其他浏览器 ） || document.body.scrollTop（谷歌浏览器 和没有声明 DTD <DOCTYPE>） || 0（前三个都不认识的从0开始）; - JSON
是一种轻量级的数据交换格式、JavaScript对象表示法、一般就是被当做一个配置单用
var json = {name: “李白”,age: 15}json名.属性 json.name 李白
3.检测是不是怪异模式的浏览器（没有声明DTD）
document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写
三、固定导航栏
实例：页面滚动的top值大于指定盒子的距离导航栏变为fixed
var nav = $("Q-nav");
var navtop = nav.offsetTop;
window.onscroll = function () {
if(scroll().top >= navtop) {
nav.className = "nav fixed";
}
else {
nav.className = "nav";
}
}
四、 固定（跟随）广告
var pic = $("pic");
var leader = 0, target = 0;
var timer = null;
var top = pic.offsetTop;//top值是个固定值，如果放在里面每次都不一样
window.onscroll = function(){
clearInterval(timer);//滚动之前清除 获取最新的定时器
target = scroll().top + top;//最新的滚动卷去的头部
timer = setInterval(function(){
leader = leader + (target - leader) / 10;
pic.style.top = leader +"px";
},30);
}
五、 小火箭返回顶部
- scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。
页面滚动，小火箭出现。
点击火箭，页面滚到上方。
起始位置：页面滚动到的位置；目标位置：0。
var gotop = $("gotop");
window.onscroll = function(){
scroll().top > 0 ? show(gotop) : hide(gotop);
leader = scroll().top;
}
var leader = 0,target = 0, timer = null;
gotop.onclick = function(){
target = 0;
timer = setInterval(function(){
leader = leader + (target - leader)/10;
window.scrollTo(0,leader);
if (leader == target) {
clearInterval(timer);//页面到顶部 都为0时 清除定时器
}
},30);
}
六、屏幕滑动效果
var ulbox = $("ul");
var ulboxli = ulbox.children;
var olbox = $("ol");
var olboxli = olbox.children;
var array = ["pink","blue","red","yellow","green"];
var leader = 0,target = 0,timer = null;
for(var i = 0;i<ulboxli.length;i++) {
olboxli[i].index = i;//获取索引值 很重要
ulboxli[i].style.backgroundColor = array[i];
olboxli[i].style.backgroundColor = array[i];
olboxli[i].onclick = function(){
clearInterval(timer);
target = ulboxli[this.index].offsetTop;//核心语句
timer = setInterval(function(){
leader = leader +(target - leader)/10;
window.scrollTo(0,leader);
},30)
}
}
