前端基本功--网页特效2 11.14

一、模拟垂直滚动条

重点在计算，思考滚动条的移动距离和盒子中内容的关系！
滚动条移动一像素，内容移动多少？ = 多出来内容高度/滚动条剩余高度 *滚动条移动距离

      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;
        }

2. Html基本结构访问方法
   document.head
   document.body
   document.title
   没有 document.html 取而代之的是 document.documentElement;

二、scroll家族

Offset 自己的 偏移
scroll 滚动的

1. scrollTop scrollLeft
   scrollTop 被卷去的头部 就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
   事件：window.onscroll = function() { 页面滚动语句 }
   兼容写法：
   var scrollTop = window.pageYOffset（ ie9+ 和 最新浏览器 都认识） || document.documentElement.scrollTop （火狐 和其他浏览器 ） || document.body.scrollTop（谷歌浏览器 和没有声明 DTD <DOCTYPE>） || 0（前三个都不认识的从0开始）;
2. 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);
         }

五、 小火箭返回顶部

1. 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)
           
       }
   }