javascript网页特效（二）

1 scroll家族——scrollTop、scrollLeft 

1.1 scrollTop 和 scrollLeft 

　　scrollTop本身含义：被卷去的头部，它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离。scrollLeft:同理scrollTop。

1.2 怎么得到scollTop 

　　我们学习一个事件 ：  页面滚动事件  
　　window.onscroll = function() { 页面滚动语句  }  

　　各种浏览器下获得scollTop  
　　1. 谷歌浏览器和没有声明 DTD   ：  
　　document.body.scrollTop;  
　　2. 火狐和其他浏览器   
　　document.documentElement.scrollTop;  
　　3. ie9+和 最新浏览器都认识  
　　window.pageXOffset(scrollLeft); pageYOffset（scrollTop）  

　　兼容性写法：  
    

var scrollTop = window.pageYOffset || document.documentElement.scrollTop
        || document.body.scrollTop || 0;

 1.3 代码示例 

　　  CSS代码：

body {
            height: 3000px;
        }

　　　javascript代码：   

2 封装自己的scollTop函数 

2.1 简单介绍javascript对象字面量 

　　javascript有基本的数据类型，同样也可以表示对象。 `var obj = {属性名:值,属性名:值}`  
　　访问对象中的属性   `obj.属性名`

代码示例

　　　CSS代码：

  body {
            height: 3000px;
        }

　　　javascript代码：  

    

看看结果是什么？

   接下来我们再完成一个示例——固定导航栏  
   CSS代码：

        

*{margin:0;padding:0}
        img{
            vertical-align: top;
        }
        .main{
            margin:0 auto;
            width:1000px;
            margin-top:10px;

        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }

　　　html代码：  

      

　　　javascript代码：   
 
    

my.js代码
        function $(id) {return document.getElementById(id);}
        function scroll() {
            if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
            {
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            }
            else if(document.compatMode == "CSS1Compat") 
            {
                return {
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }
            return { //  剩下的肯定是怪异模式的
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
    }
    
    

2.3 案例 

    
    
    
    
    




   
天王盖地虎，小鸡炖蘑菇
   
天王盖地虎，小鸡炖蘑菇
   
天王盖地虎，小鸡炖蘑菇
   
天王盖地虎，小鸡炖蘑菇
   
天王盖地虎，小鸡炖蘑菇
   

3 scroll家族——scollTo方法 

3.1 scollTo(x,y)方法 

　　　scrollTo(xpos,ypos) 方法可把内容滚动到指定的坐标。  
　　　xpos    必需。要在窗口文档显示区左上角显示的文档的 x 坐标。  
　　　ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标。  
　　　因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

3.2 案例

	
	
	




    
首页
    
关注
    
动态
    
风格
    
作品


    
首页
    
关注
    
动态
    
风格
    
作品




	

# 3.4 放大镜效果实现 #  

　　


# 总结 #

　　学习了scollTo家族的属性，综合上述知识及上节课的内容完成放大镜和固定导航栏等案例。



# 预习 #
　　学习了scollTo家族的属性和事件的冒泡机制。