javascript的一些效果的实现原理（一）

作者:zccst

一、腾讯qq，鼠标移到头像上，展示个人信息卡片

原理：如果仅仅使用mouseover和mouseover方法，不能表现相同效果（特别是有间隔的时候）。需要增加定时器。

<style>
#div1{width:300px; height:30px; background:red; margin:10px;}
#div2{width:500px; height:50px; background:blue; margin:10px; display:none;}
</style>
<script type="text/javascript">
	window.onload = function(){
	var odiv1 = document.getElementById("div1");
	var odiv2 = document.getElementById("div2");
	var timer = null;
	odiv1.onmouseover = odiv2.onmouseover = function(){
		odiv2.style.display="block";
		clearTimeout(timer);
	}
	odiv1.onmouseout = odiv2.onmouseout = function(){
		timer = setTimeout(function(){
			odiv2.style.display="none";
		},300);
	}
}
</script>
<div id="div1"></div>
<div id="div2"></div>

2，无缝滚动
四个变量
offsetLeft
offsetTop
offsetWidth
offsetHeight

原理：div是relative，overflow:hidden，ul是absolute且offsetleft = 0;使用setIntervent()滚动。

先计算ul的宽度（一个li的宽度乘以li的个数），然后将ul下li内的图片复制一份（oUl.innerHTML += oUl.innerHTML;），当图片向左（右）滚动一般的时候，迅速让offsetleft = 0，这样用户看起来就是不能的向左滚动。

在设置两个按钮控制方向，本质是设置offsetleft + ispeed +'px';中ispeed的正负。


setInterval(function(){
oUl.style.left = oUl.offsetLeft + ispeed + 'px';
if(oUl.offsetLeft < -oUl.offsetWidth/2){
  offsetLeft = '0px';
}
else if(oUl.offsetLeft > 0){
  oUl.offsetLeft = -oUl.offsetWidth/2
}
},20);

鼠标移入li时暂停，本质上关闭定时器。移出继续开始，是开启定时器。
oUl.onmouseover = function(){clearInterval(timer);}
oUl.onmouseout = function(){//重开定时器}



3，换肤
原理：改变link里的href
<link id="link1" href="css1.css" type="css/txet" rel="stylesheet" />
<a onclick="document.getElementById('link1').href='css1.css'"></a>

注：link标签也能加id


4，展开、收缩（比如，百度搜索按钮右侧的输入法）
原理：点击事件+if判断（如果已经显示就隐藏，如果隐藏就显示）


5，选项卡，tab切换
静态原理：
（1）按钮用ul li，设置一个li和一个div的class为selectedLi和selectedDiv。被selectedLi的选项卡：border-bottom的颜色同显示的下面div区域的背景色，同时使该li的position:relative; top:1px，使li压住下面div的边框。
被selectedLi的div区域，设置背景。
（2）div区域，将所有display等于none，跟按钮相同索引的display为block。

动态选择：
点击时（同时传值），设置li和div，使之的className等于selectedLi和selectedDiv。
先清空，则设置active的li和div的样式。

<style type="text/css">
#tab ul{ margin:0; padding:0; list-style:none;}
#tab li{ float:left; margin-left:10px; padding:0 5px; background:#FFC; border:#F39 solid 1px;}
#tab div{ clear:both; width:500px; height:200px; display:none; border:#FCF solid 1px;}
#tab li:hover{ cursor:pointer;}

#tab li.selectedLi{background:#9CF; border-bottom:#9CF solid 1px; position:relative; top:1px;}
#tab div.selectedDiv{ display:block; background:#9CF}
</style>
<script type="text/javascript">
function changeTab(nIndex)
{
	var oLis = document.getElementById("tab").getElementsByTagName("li");
	var oDivs = document.getElementById("tab").getElementsByTagName("div");
	for(var i = 0 ; i < oLis.length; i++)
	{
		oLis.item(i).className = '';
		oDivs.item(i).className = '';
	}
	oLis.item(nIndex).className = 'selectedLi';
	oDivs.item(nIndex).className = 'selectedDiv';
}
</script>

<div id="tab">
	<ul>
		<li onclick="changeTab(0);"  class="selectedLi">新闻频道</li>
		<li onclick="changeTab(1);">工作频段</li>
		<li onclick="changeTab(2);">家庭频道</li>
		<li onclick="changeTab(3);">感情频道</li>
		<li onclick="changeTab(4);">生活频道</li>
	</ul>
	<div class="selectedDiv">选项卡一</div>
	<div><p>今天不上班啊</p></div>
	<div><p>明天星期五啊</p><p>上街看北京天文博物馆呀，呵呵</p></div>
	<div><p>爱一个需要缘分</p><p>快乐的秘诀</p></div>
	<div><p>释放压力的方法</p><p>晚上睡眠的注意事项</p></div>
</div>

6，时钟
定时器知识：
setInterval()  //不停执行。  间隔型。
setTimeout();  //只执行一次。延迟型。

clearInterval(timer);
clearTimeout(timer);


备注：miaov.com是个不错的网站。