设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网络编程 › javascript实现的又一个不错的滑动导航效果

发新帖

查看: 380|回复: 20

[JavaScript] javascript实现的又一个不错的滑动导航效果

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2007-4-21 00:00:00 | 显示全部楼层 |阅读模式

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

<html> 
<head> 
<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> 
</head>

<body bgcolor="#FFFFFF" text="#000000"> 
 
    
    <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>
 
          <a href="#;">第二项</a>
 
          <a href="#;">第三项</a>
 
          </font></td> 
      </tr> 
    </table> 
   
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr>  
        <td> 
          <font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">on 2
 
            <a href="#;">第一项</a>
 
            <a href="#;">第二项</a>
 
            <a href="#;">第三项</a>
 
            </font> 
        </td> 
      </tr> 
    </table> 
   
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr>  
        <td> 
          <font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">on 3
 
            <a href="#;">第一项</a>
 
            <a href="#;">第二项</a>
 
            <a href="#;">第三项</a>
 
            </font> 
        </td> 
      </tr> 
    </table> 
      
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="72"> 
      <tr>  
        <td height="24" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)">    </td> 
      </tr> 
      <tr> 
        <td height="24" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">    </td> 
      </tr> 
      <tr> 
        <td height="24" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">    </td> 
      </tr> 
    </table> 
   
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

滑动, 效果, 导航

相关帖子

回复

使用道具举报

0 主题	1万回帖	68 积分

Rank: 2

积分: 68

发消息

发表于 2022-10-21 23:22:48 | 显示全部楼层

这个源码不错啊

回复支持反对

使用道具举报

7 主题	2万回帖	398 积分

Rank: 3 Rank: 3

积分: 398

发消息

发表于 2022-11-11 21:05:18 | 显示全部楼层

哟哟哟哟哟以偶

回复支持反对

使用道具举报

1 主题	2万回帖	307 积分

Rank: 3 Rank: 3

积分: 307

发消息

发表于 2023-1-14 11:48:17 | 显示全部楼层

还可以不错

回复支持反对

使用道具举报

0 主题	2万回帖	194 积分

Rank: 2

积分: 194

发消息

发表于 2023-7-17 11:41:36 | 显示全部楼层

sdsadsadsadf

回复支持反对

使用道具举报

0 主题	2万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-8-13 07:36:20 | 显示全部楼层

啦啦啦啦啦德玛西亚

回复支持反对

使用道具举报

2 主题	2万回帖	381 积分

Rank: 3 Rank: 3

积分: 381

发消息

发表于 2024-3-3 22:41:48 | 显示全部楼层

激动人心，无法言表！

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2024-6-1 17:32:45 | 显示全部楼层

还不错啊

回复支持反对

使用道具举报

0 主题	2万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2024-6-17 08:33:30 | 显示全部楼层

hi哦和烦恼农家女

回复支持反对

使用道具举报

3 主题	2万回帖	156 积分

Rank: 2

积分: 156

发消息

发表于 2024-7-26 19:40:35 | 显示全部楼层

的沙发水电费水电费

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 06:17 , Processed in 0.102019 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表