标签：style blog io ar color os sp for on
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style> 6 h1,h2{text-align:center;} 7 div{width:20px;height:20px;background:gray;float:left;margin:5px 5px;overflow:hidden;} 8 #main{width:1300px;height:500px;background:blue;margin:0px;position:relative;top:50px;} 9 span{position:absolute;left:150px;font-size:30px;width:300px;display:none;font-family:"microsoft yahei";} 10 #main1{position:absolute;left:50px;display:inline;} 11 12 </style> 13 14 <script> 15 window.onload=function(){ 16 var Omai=document.getElementById("main"); 17 var Omai1=document.getElementById("main1"); 18 var arr=["blue","yellow","gray"] 19 20 for(var i=0;i<520;i++){ //添加520个对象 21 var OdivChild=document.createElement("div") 22 Omai.appendChild(OdivChild) 23 var OspaChild=document.createElement("span") 24 var text=document.createTextNode((i+1)+"只毛尼玛") 25 OspaChild.appendChild(text) 26 Omai1.appendChild(OspaChild) 27 28 } 29 30 var aBtn=document.getElementsByTagName("div") 31 var aSpa=document.getElementsByTagName("span") 32 for(var j=0;j<aBtn.length;j++){ 33 aBtn[j].num=j; //创建索引 34 aSpa[j].num=j; 35 aBtn[j].onmouseover=function(){ 36 switch(this.num){ //外包div不参与动作 37 case 0: 38 break; 39 40 case 1: 41 if(this.style.background!="yellow"){ 42 this.style.background="yellow"; 43 aSpa[this.num].style.display="inline"; 44 aSpa[this.num].style.color=arr[this.num%3] 45 } 46 break; 47 48 49 case 520: 50 if(this.style.background!="yellow"&&aBtn[this.num-1].style.background=="yellow"){ //只当前一个变色才变色 51 this.style.background="yellow"; 52 aSpa[this.num-1].style.display="none"; 53 aSpa[this.num].style.display="inline"; 54 55 } 56 else if(this.style.background=="yellow"){ 57 this.style.background="gray"; 58 aSpa[this.num].style.display="inline"; 59 aSpa[this.num].style.color=arr[this.num%3] 60 61 62 } //末尾div独立代码 63 break; 64 65 66 default: 67 if(this.style.background!="yellow"&&aBtn[this.num-1].style.background=="yellow"){ 68 this.style.background="yellow" 69 aSpa[this.num-1].style.display="none"; 70 aSpa[this.num].style.display="inline"; 71 aSpa[this.num].style.color=arr[this.num%3] 72 73 } 74 else if(this.style.background=="yellow"&&aBtn[this.num+1].style.background!="yellow"){ 75 this.style.background="gray" 76 if(this.num==519){ //519与520衔接 77 aSpa[this.num+1].style.display="none"; 78 aSpa[this.num-1].style.display="inline"; 79 aSpa[this.num].style.color=arr[this.num%3] 80 81 } 82 else{ 83 aSpa[this.num].style.display="none"; 84 aSpa[this.num-1].style.display="inline"; 85 aSpa[this.num].style.color=arr[this.num%3] 86 } 87 88 } 89 } 90 91 92 } 93 } 94 95 } 96 97 </script> 98 99 </head> 100 <body> 101 <h1>数毛尼玛</h1> 102 <h2>依次用鼠标划过按钮开始数毛尼玛，不得跳跃——by sheepshine 2014年11月20日 23:49:36</h2> 103 <span id="main1">已经数了</span> 104 <div id="main" ></div> 105 106 </body> 107 </html>
标签：style blog io ar color os sp for on
原文地址：http://www.cnblogs.com/sheepshine/p/4119085.html
