作者: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是个不错的网站。