javascript简单特效，js学习

简单js特效制作-学习

制作之前，我们先了解一下一些基础知识

offset

自己的，js中获取元素尺寸的api，通常使用的就是offset家族，先简单介绍一下这个家族，关于offset详细知识点大家可以自行百度。

转载的一张图，基本所有的页面获取尺寸的api都包含了，下面我们详细说一下这张图

offsetWidth,       offsetHeight

得到对象自己的高度和宽度，是指元素对象自己的，与其他元素和页面无关，举个例子

div {  width:100px; border-left:1px solid red; padding:10px;}

div.offsetWidth = 100+1+10  ，也就是说offsetWidth  = width+border+padding，offsetHeight同理

offsetLeft,  offsetRight

距离父级元素左边或者右边的距离，父级元素是指带有定位的元素，如果没有上级元素，或者上级元素都没有定位，则以body为准

要注意一点的是，是offsetLeft是从父级的padding开始算，border不算，就是说子元素，到定位父元素，，他们两边框到边框的距离

offsetParent返回父元素，不一定上一级，可能是爷爷，太爷爷，反正直到有定义的父级，如果父级都没定位，则返回body

对比区别我就不列举，要学习这个，可以去详细百度

event

事件对象，

属性	作用
data	返回拖拽对象的URL字符串（dragDrop）
width	该窗口或框架的高度
height	该窗口或框架的高度
pageX	光标相对于该网页的水平位置（ie无）
pageY	光标相对于该网页的垂直位置（ie无）
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
target	该事件被传送到的对象
type	事件的类型
clientX	光标相对于该网页的水平位置 （当前可见区域）
clientY	光标相对于该网页的水平位置

一个api就可以看懂了，

需要注意的是pageX,screenX,clientX,的区别

screenX是以电脑屏幕为基准，

pageX是以文档为基准，ie6，7，8版本不兼容，绝对定位

clientX以可见区域为基准，相当于固定定位

废话了那么多 ，了解了这些之后，我们就可以开始做一些简单特效了：

首先任何js的特效在实现的时候，都需要一个良好的css布局，本人也是一个java程序员，css了解不深，也才开始学。

导航小特效

可以根据自己的需求，改变样式

	
		
		
		
	
	
		
 
			
			

				
首页
				
贵州
				
深圳
				
重庆
				
北京
				
杭州
			
		
	

效果图：

电商网站，放大镜效果

效果图：

滑动条选择效果

功能不难，很简单的东西，在许多特效素材网站上都能搜到很多，，比这个炫很多的，不过学习就是另一回事了！