javascript小实例【第四课时笔记】
1.模仿延时提示框js代码。
1 <script type="text/javascript"> 2 window.onload=function () 3 { 4 var oHead=document.getElementById('head'); 5 var oRight=document.getElementById('right'); 6 var timer=null; 7 8 oRight.onmouseover=oHead.onmouseover=function () 9 { 10 clearInterval(timer); 11 setTimeout(function (){ 12 oRight.style.display='block'; 13 }, 300); 14 }; 15 oRight.onmouseout=oHead.onmouseout=function () 16 { 17 clearInterval(timer); 18 timer=setTimeout(function (){ 19 oRight.style.display='none'; 20 }, 300); 21 }; 22 }; 23 </script>
连续赋值(连等)a=b=1,代码中通过简化,利用了连等这个特性;其次,主要应用onmouseover / onmouseout这两个事件;以及延时性的定时器。
2.无缝滚动js代码
1 var g_bMoveLeft=true; 2 var g_oTimer=null; 3 var g_oTimerOut=null; 4 5 var g_iSpeed=3; 6 7 window.onload=function () 8 { 9 var oDiv=document.getElementById('roll'); 10 var oUl=oDiv.getElementsByTagName('ul')[0]; 11 var aLi=oUl.getElementsByTagName('li'); 12 var aA=oDiv.getElementsByTagName('a'); 13 14 var i=0; 15 16 var str=oUl.innerHTML+oUl.innerHTML; 17 18 oUl.innerHTML=str; 19 20 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; 21 22 for(i=0;i<aLi.length;i++) 23 { 24 aLi[i].onmouseover=function () 25 { 26 stopMove(); 27 }; 28 29 aLi[i].onmouseout=function () 30 { 31 startMove(g_bMoveLeft); 32 }; 33 } 34 35 aA[0].onmouseover=function () 36 { 37 startMove(true); 38 }; 39 40 aA[1].onmouseover=function () 41 { 42 startMove(false); 43 }; 44 45 startMove(true); 46 }; 47 48 function startMove(bLeft) 49 { 50 g_bMoveLeft=bLeft; 51 52 if(g_oTimer) 53 { 54 clearInterval(g_oTimer); 55 } 56 g_oTimer=setInterval(doMove, 30); 57 } 58 59 function stopMove() 60 { 61 clearInterval(g_oTimer); 62 g_oTimer=null; 63 } 64 65 function doMove() 66 { 67 var oDiv=document.getElementById('roll'); 68 var oUl=oDiv.getElementsByTagName('ul')[0]; 69 var aLi=oUl.getElementsByTagName('li'); 70 71 var l=oUl.offsetLeft; 72 73 if(g_bMoveLeft) 74 { 75 l-=g_iSpeed; 76 if(l<=-oUl.offsetWidth/2) 77 { 78 l+=oUl.offsetWidth/2; 79 } 80 } 81 else 82 { 83 l+=g_iSpeed; 84 if(l>=0) 85 { 86 l-=oUl.offsetWidth/2; 87 } 88 } 89 90 oUl.style.left=l+'px'; 91 }
offsetLeft( 返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标) 不懂这个属性的可以看着一篇文章http://www.cnblogs.com/JackJiang/archive/2008/12/24/1361048.html/ offsetWidth(对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。)
通过li.offsetWidth*li.length=ul动态的得到ul长度,无论有多少个li都会及时的改变ul的长度。
绝对定位的top和left值的修改,只有在CSS样式中设置了相应的position:absolute才能够有效的改变offsetLeft的值。
innerHTML赋值
关于+=这个符号,例如a+=b的意思就是a=b+a;本例中运用了innerHTML+=innerHTML。
3.三级菜单通过js实现。
1 function leo(n){ 2 var navUi = document.getElementById("m"+n); 3 if(navUi.style.display != "block"){ 4 for(var i=0;i<=5;i++){ 5 document.getElementById("m"+i).style.display = "none"; 6 } 7 navUi.style.display = "block"; 8 }else{ 9 navUi.style.display = "none"; 10 } 11 } 12 </script>
这里给出了一个最基本的二级菜单的代码。首先要在结构和样式里面布局好,通过改变display的none和block值来显示或隐藏菜单。
4.软件即时评分
1 window.onload=function(){ 2 var oPf=document.getElementById('pingfen'); 3 var aLi=oPf.getElementsByTagName('li'); 4 var i=0; 5 6 for(i=0;i<aLi.length;i++){ 7 aLi[i].index=i; 8 aLi[i].onmouseover=function(){ 9 for(i=0;i<aLi.length;i++){ 10 if(i<=this.index) 11 { 12 aLi[i].style.background="url(star.gif) no-repeat 0 -29px"; 13 } 14 else 15 { 16 aLi[i].style.background="url(star.gif) no-repeat 0 0"; 17 } 18 } 19 }; 20 21 aLi[i].onmousedown=function () 22 { 23 alert('提交成功:'+(this.index+1)+'分'); 24 }; 25 } 26 };
this.index的应用,获取当前的索引号,注意第一个是索引号码0而不是1,和数组下标相同。当把鼠标移动到相应的星星上面的时候,颜色和文字说明都会发生变化,并且弹出提示框。
念念不忘,必有回响。