ホームページ >ウェブフロントエンド >jsチュートリアル >javascript实现的又一个不错的滑动导航效果_导航菜单

javascript实现的又一个不错的滑动导航效果_导航菜单

WBOYオリジナル: 2016-05-16 19:14:431152ブラウズ

导航,鼠标放上去看看效果

<title>::你会做，我也要会::</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script language="JavaScript">

function MM_findObj(n, d) { //v4.01 
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
  if(!x && d.getElementById) x=d.getElementById(n); return x; 
}

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII 
 var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y); 
 var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';  
 if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;} 
 if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;} 
 var xx=(parseInt(d.left))?parseInt(d.left):0; 
 var yy=(parseInt(d.top))?parseInt(d.top):0; 
 if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;} 
 else if (c==2) {m=false;clearTimeout(g.p7Magic);} 
 else {var i=parseInt(a); 
  if (eval(g.moved)){clearTimeout(g.p7Magic);} 
  if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}} 
  if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}} 
  if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}} 
  if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}} 
 if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){ 
    xx+="px";yy+="px";} 
  d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')'); 
  }else {g.moved=false;} 
} 
//--> 
</script> 
<style type="text/css"> 
 
</style>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"> 
  <div id="Layer2" style="position:absolute; left:264px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t">  
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> 
      <tr>  
        <td align="center" valign="top"><font color="#FFFFFF" onmouseover="P7AniMagic('Layer2',210,35,5,30,0,0)" onmouseout="P7AniMagic('Layer2',264,59,5,30,0,0)">on  
          1
 
          <a href="#;">绗</a></font></td>
</tr>
</table>
</div>
</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css实现的图片模糊效果_javascript技巧次の記事：疯掉了,尽然有js写的操作系统_javascript技巧

関連記事

続きを見る