你的位置: Kiyo'Space首页 HTML/CSS/特效 阅读文章 欢迎留下您的足迹

JS+CSS滑动菜单效果

[ HTML/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


欢迎在此留下您的脚步






评论内容 (*必填):
(Ctrl + Enter 快速提交)