javascript网页特效（一）

      在制作网页特效可以使用CSS3，也可以编写javascript代码，现在把在工作中常用的有关javascript属性和方法总结一下，希望能对初学者有些帮助。

     使用javascript制作网页特效，避免不了要获得元素的大小位置的数据，哪javascript中给我们提供了一些获得宽高位置的属性，主要用的一下家族的属性：

       1.offset家族常用属性

　　2. scroll家族常用属性

　　3. client家族常用属性

     现在我就主要来说说offset家族常用属性：

1 offset家族——offsetWidth和offsetHeight

　　　　　本身含义：得到对象自己的宽度和高度
　　　　　offsetWidth = width + border + padding

1.1offsetWidht和style.width的区别

　　　　　style.width只能获得行内样式中的width属性的值，offsetWidth不光可以获得行内样式的值，也可以获得内部样式和外部样式的值。

1.2代码示例

　　 CSS代码：

    #demo {
        width: 300px;
        border: 1px solid red;
        padding: 10px;
        margin:15px;
        }

　　　HTML代码：

    

        asdfasdfasdasdfasdfasdfasdfasdf
        asdfasdfasdasdfasdfasdfasdfasdf
        asdfasdfasdasdfasdfasdfasdfasdf
    

　　　javascript代码：

    var demo = document.getElementById("demo");
    console.log(demo.style.width);  // style.width  只能得到行内式
    console.log(demo.offsetWidth);
    console.log(demo.offsetHeight);  

2.offset家族——offsetLeft、offsetTop

2.1 offsetLeft、offsetTop

　　本身含义：返回距离上级盒子(最近的带有定位)的左边和上边的距离。如果父级都没有定位以body为准。

2.2 代码示例

　　　CSS代码：

    *{margin: 0px;padding: 0px}
    #yeye {
        position: relative;
        background-color: orange;
        width: 630px;
        height: 700px;
        padding: 100px;
    }
     #father {

        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
        margin-left:30px;

    }
    #son {

        width: 200px;
        height: 200px;
        background-color: purple;
    }

　　　HTML代码：

　　　javascript代码：

var son = document.getElementById("son");
console.log(son.offsetLeft);

　　

2.3 案例

　

	
	
	


	

		

		

			
首页新闻
	        
师资力量
	        
活动策划
	        
企业文化
	        
招聘信息
	        
公司简介
	        
上海校区
	        
广州校区
		
		
	

2.4 总结

offsetLeft从父级的padding开始算起，父级的border不算，也就是在盒子到定位盒子边框到边框的距离。 

3 offset家族——offsetParent

3.1 offsetParent和parentNode的区别

　　　offsetParent：返回该对象的父级（带有定位，有可能是爷爷)对象。 　　　parentNode返回父级节点对象（亲爹）。 　　　

3.2 代码示例

　　　CSS代码：

#gf {
          position: absolute;
    }

　　　HTML代码：

　　　javascript代码：

3.3 offset家族属性和style属性的区别

3.3.1 区别

　　1. offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以,只有定位的盒子才有 left,top等属性。
　　2. offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
　　3. offsetTop 只读，而 style.top 可读写。
　　4. 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
　　5. 最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便 　

3.3.2 代码示例

　　CSS代码：

#demo {
       width: 200px;
}

　　HTML代码：

　　javascript代码：

4 做几个小案例试试

4.1 如何得到鼠标在盒子中的坐标

废话不多说，上代码

CSS代码：

　　　HTML代码：

　　　JavaScript代码：

4.2 水平滚动条