作者:zccst
一、腾讯qq,鼠标移到头像上,展示个人信息卡片
原理:如果仅仅使用mouseover和mouseover方法,不能表现相同效果(特别是有间隔的时候)。需要增加定时器。
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 οnclick="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的样式。
6,时钟
定时器知识:
setInterval() //不停执行。 间隔型。
setTimeout(); //只执行一次。延迟型。
clearInterval(timer);
clearTimeout(timer);
备注:miaov.com是个不错的网站。
一、腾讯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 οnclick="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是个不错的网站。