JS+CSS滑动菜单效果
| 以下是代码片段： <base href="http://www.resume-cn.com/myblog/"> <style> body{ background-color:#fff; text-align:center; } .btn1{ display:inline; overflow:hidden; border-style:solid; border-width:0px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:100px; height:100px; } .btn1_txt{ position:relative; } .btn1_txt div{ height:100px; padding-top:10px; font-size:9px; font-family:small fonts; color:Deeppink; text-align:center; cursor:hand; } .btn1_mask{ background-color:Deeppink; position:relative; width:100%; height:100%; } </style> <body> <script> function createButton(parentOb,innerHtml1,innerHtml2,clsName,maskColor){ //parentOb,按钮容器 //innerHtml1,innerHtml2,正常状态和鼠标经过时按钮显示的内容 //clsName,按钮样式，一套四部分，参见本例的样式定义 //maskColor，指定不同于样式clsName_mask的背景颜色，可选 //暂支持IE5.5及更高版本————本以为IE5.0该也支持的，但是那浏览器本身实在漏洞百出，怪我不得 //对IE以外的浏览器clsName的display为会强制为block（这是标准，inline时指定尺寸会失效，除了IE谁都遵守) //支持opera8.0 //在Firefox1.0.3和netScape8.01中，运行后会总有一个按钮会保持为鼠标移入时的状态 //别的浏览器我没有，谁有兴趣可以帮忙试试 //mozart0,2005.06.17 var fbtn=document.createElement('DIV'); var fbtn_mask=document.createElement('DIV'); var fbtn_txt=document.createElement('DIV'); fbtn.className=clsName; fbtn_mask.className=clsName+'_mask'; fbtn_txt.className=clsName+'_txt'; fbtn_txt.innerHTML='<div>'+innerHtml1+'</div><div>'+innerHtml2+'</div>'; parentOb.appendChild(fbtn); fbtn.appendChild(fbtn_mask); fbtn.appendChild(fbtn_txt); if(!/myie2/i.test(navigator.userAgent)) fbtn.style.display='block'; fbtn.width=fbtn.clientWidth; fbtn.height=fbtn.clientHeight; if(maskColor) fbtn_mask.style.backgroundColor=maskColor; if(!createButton.Btn){ createButton.Btn=[fbtn]; createButton.Btn_mask=[fbtn_mask]; createButton.Btn_txt=[fbtn_txt]; fbtn.index=0; } else{ fbtn.index=createButton.Btn.length; createButton.Btn.push(fbtn); createButton.Btn_mask.push(fbtn_mask); createButton.Btn_txt.push(fbtn_txt); } fbtn_txt.style.top=-1*fbtn.height+'px'; fbtn_mask.style.top=-1*fbtn.height+'px'; fbtn.onmouseover=function(){ if(!createButton.current){ createButton.current=this; domove(this.index); } else if(createButton.current!=this){ domove(createButton.current.index); domove(this.index); createButton.current=this; } } fbtn.onmouseout=function(){ if(window.event&&event.toElement==parentOb&&createButton.current==this){ //此处为FF和NS中的BUG源:window.event为undefined //我在FF中仅找到过一类情况下event勉强是个东西（Object）:<body onclick='alert(event)'></body> //谁知道此处怎么解决或者有相关资料，望不吝赐教 domove(this.index); createButton.current=null; } } if(window.domove) return; window.domove=function(num){ var o=createButton.Btn[num]; var t=createButton.Btn_txt[num]; var m=createButton.Btn_mask[num]; if(t.style.top.replace('px','')<-2*o.height){ t.style.display="none"; var temp=t.childNodes[0].innerHTML; t.childNodes[0].innerHTML=t.childNodes[1].innerHTML; t.childNodes[1].innerHTML=temp; t.style.top=-1*o.height+'px'; t.style.display="block"; if(m.style.top.replace('px','')>o.height) m.style.top=-1*o.height+'px'; else m.style.top='0px'; } else{ m.style.top=(parseInt(m.style.top.replace('px',''))+3)+'px'; t.style.top=(parseInt(t.style.top.replace('px',''))-3)+'px'; setTimeout('domove('+num+')',10); } } } createButton(document.body,'<br><br><br>niko1','<img src=uploads/200701/31_201329_preview_s01.jpg>','btn1'); createButton(document.body,'<br><br><br>niko2','<img src=uploads/200701/31_201329_preview_s01.jpg>','btn1','limegreen'); createButton(document.body,'<br><br><br>niko3','<img src=uploads/200701/31_201329_preview_s01.jpg>','btn1','orange'); createButton(document.body,'<br><br><br>niko4','<img src=uploads/200701/31_201329_preview_s01.jpg>','btn1','mediumslateblue'); createButton(document.body,'<br><br><br>niko5','<img src=uploads/200701/31_201329_preview_s01.jpg>','btn1','red'); </script> <br><div align=center><a href=http://www.resume-cn.com/myblog/><img src="http://www.resume-cn.com/myblog/logo.gif" border=0 target=_blank></a></div> |
From:http://www.resume-cn.com/myblog/article.asp?id=175
版权声明：
作者：Kiyo
链接：https://www.wkiyo.cn/html/2008-01/i407.html
来源：Kiyo's space
文章版权归作者所有，未经允许请勿转载。
THE END
二维码
共有 0 条评论