主题:  这个效果怎么实现的!!!!!急!!!!

珂珂

职务:普通成员
等级:1
金币:0.0
发贴:106
#12004/11/23 16:43:46
www.f8-studio.com/html/clients/obln-0304fw.htm#

。。。但是左边那些数字。。。点上去跳一下。然后就换了图片啊。。。这些效果怎么弄出来。? ????用什么软件作啊?DW吗???大家快帮忙啊。谢谢了!



colordog

职务:普通成员
等级:1
金币:0.0
发贴:53
#22004/11/23 19:37:47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>F8摄影设计工作室</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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 MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#000000" onLoad="MM_preloadImages('../../pic/works/clents-logos/nowhere-2.jpg','../../pic/works/clents-logos/anruijing-2.jpg','../../pic/works/clents-logos/jiexi-2.jpg','../../pic/works/clents-logos/chaojie-2.jpg','../../pic/works/clents-logos/fansinuo-2.jpg','../../pic/works/clents-logos/feijialuo-2.jpg','../../pic/works/clents-logos/yinger-2.jpg','../../pic/works/clents-logos/add-2.jpg','../../pic/works/clents-logos/mala-2.jpg','../../pic/works/clents-logos/menglini-2.jpg','../../pic/works/clents-logos/obln-2.jpg','../../pic/works/clents-logos/onixun-2.jpg','../../pic/works/clents-logos/qiqiku-2.jpg','../../pic/works/clents-logos/yulanggongwu-2.jpg','../../pic/works/clents-logos/limeili-2.jpg','../../web-pic/b-backtomenu-2.gif','../../pic/works/2000/-03-04fw-2.jpg','../../pic/works/12345/01-.gif','../../pic/works/12345/02-.gif','../../pic/works/12345/03-.gif','../../pic/works/12345/04-.gif','../../pic/works/12345/05-.gif','../../pic/works/12345/06-.gif','../../pic/works/12345/07-.gif','../../pic/works/12345/08-.gif','../../pic/works/12345/09-.gif','../../pic/works/12345/10-.gif','../../pic/works/12345/11-.gif','../../pic/works/12345/12-.gif','../../pic/works/2000/-01-02fw-2.jpg','../../pic/works/2000/-2002ss-2.jpg','../../pic/works/2000/-2004ss-2.jpg','../../pic/works/2000/-04-05fw-2.jpg')"oncontextmenu="return false;" onselectstart="return false">
<div id="Layer1" style="position:absolute; left:0px; top:99px; width:1151px; height:400px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"><img src="../../pic/works/di.gif" width="1600" height="402"></div>
<div id="Layer3" style="position:absolute; left:124px; top:100px; width:43px; height:309px; z-index:3">
<p><img src="../../pic/works/clients.gif" width="47" height="239"></p>
<p><a href="../home.htm"><img src="../../web-pic/jian-f.gif" width="26" height="24" border="0"></a></p>
</div>
<div id="Layer5" style="position:absolute; left:170px; top:100px; width:13px; height:142px; z-index:5"><img src="../../web-pic/1x100.jpg" width="1" height="400"></div>
<div id="kuang" style="position:absolute; left:183px; top:154px; width:141px; height:109px; z-index:16">
<p><img src="../../pic/works/clents-zi/obln.jpg" width="164" height="23"><a href="obln-01fw.htm" onMouseOver="MM_swapImage('Image20','','../../pic/works/2000/-01-02fw-2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../../pic/works/2000/-01-02fw-1.jpg" name="Image20" width="132" height="22" border="0"></a><a href="obln-02ss.htm" onMouseOver="MM_swapImage('Image25','','../../pic/works/2000/-2002ss-2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../../pic/works/2000/-2002ss-1.jpg" name="Image25" width="132" height="22" border="0"></a><a href="obln-0304fw.htm" onMouseOver="MM_swapImage('Image23','','../../pic/works/2000/-03-04fw-2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../../pic/works/2000/-03-04fw-2.jpg" name="Image23" width="132" height="22" border="0"></a><a href="obln-04ss.htm" onMouseOver="MM_swapImage('Image181','','../../pic/works/2000/-2004ss-2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../../pic/works/2000/-2004ss-1.jpg" name="Image181" width="132" height="22" border="0" id="Image181"></a><a href="../clients-0405fw/omnialo-0405fw.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image401','','../../pic/works/2000/-04-05fw-2.jpg',1)"><img src="../../pic/works/2000/-04-05fw-1.jpg" name="Image401" width="132" height="22" border="0" id="Image401"></a></p>
<p><a href="../works.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','../../web-pic/b-backtomenu-2.gif',1)"><img src="../../web-pic/b-backtomenu.gif" name="Image18" width="82" height="24" border="0"></a></p>
</div>
<div id="a1" style="position:absolute; left:590px; top:100px; width:249px; height:374px; z-index:17; visibility: visible;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-08.jpg" width="397" height="400"></div>
<div id="Layer4" style="position:absolute; left:188px; top:468px; width:472px; height:49px; z-index:18"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','../../pic/works/12345/01-.gif',1)"><img src="../../pic/works/12345/01.gif" name="Image28" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','show','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','../../pic/works/12345/02-.gif',1)"><img src="../../pic/works/12345/02.gif" name="Image29" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','show','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','../../pic/works/12345/03-.gif',1)"><img src="../../pic/works/12345/03.gif" name="Image30" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','show','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','../../pic/works/12345/04-.gif',1)"><img src="../../pic/works/12345/04.gif" name="Image31" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','show','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','../../pic/works/12345/05-.gif',1)"><img src="../../pic/works/12345/05.gif" name="Image32" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','show','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','../../pic/works/12345/06-.gif',1)"><img src="../../pic/works/12345/06.gif" name="Image33" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','show','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','../../pic/works/12345/07-.gif',1)"><img src="../../pic/works/12345/07.gif" name="Image34" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','show','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','../../pic/works/12345/08-.gif',1)"><img src="../../pic/works/12345/08.gif" name="Image35" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','show','a9','','hide','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','../../pic/works/12345/09-.gif',1)"><img src="../../pic/works/12345/09.gif" name="Image36" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','show','a10','','hide','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image37','','../../pic/works/12345/10-.gif',1)"><img src="../../pic/works/12345/10.gif" name="Image37" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','show','a11','','hide','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image38','','../../pic/works/12345/11-.gif',1)"><img src="../../pic/works/12345/11.gif" name="Image38" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','show','a12','','hide','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image39','','../../pic/works/12345/12-.gif',1)"><img src="../../pic/works/12345/12.gif" name="Image39" width="25" height="18" border="0" onMouseOver="MM_showHideLayers('a1','','hide','a2','','hide','a3','','hide','a4','','hide','a5','','hide','a6','','hide','a7','','hide','a8','','hide','a9','','hide','a10','','hide','a11','','hide','a12','','show','a13','','hide','a14','','hide','a15','','hide','a16','','hide','a17','','hide')"></a></div>
<div id="a2" style="position:absolute; left:590px; top:100px; width:74px; height:127px; z-index:19; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-02.jpg" width="398" height="400"></div>
<div id="a3" style="position:absolute; left:590px; top:100px; width:670px; height:110px; z-index:20; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-03.jpg" width="379" height="400"></div>
<div id="a4" style="position:absolute; left:590px; top:100px; width:50px; height:123px; z-index:21; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-09.jpg" width="396" height="400"></div>
<div id="a5" style="position:absolute; left:590px; top:100px; width:67px; height:95px; z-index:22; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-01.jpg" width="371" height="400"></div>
<div id="a6" style="position:absolute; left:590px; top:100px; width:58px; height:107px; z-index:23; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-06.jpg" width="389" height="400"></div>
<div id="a7" style="position:absolute; left:590px; top:100px; width:57px; height:101px; z-index:24; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-05.jpg" width="384" height="400"></div>
<div id="a8" style="position:absolute; left:590px; top:100px; width:56px; height:113px; z-index:25; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-07.jpg" width="374" height="400"></div>
<div id="a9" style="position:absolute; left:590px; top:100px; width:53px; height:62px; z-index:26; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-11.jpg" width="399" height="400"></div>
<div id="a10" style="position:absolute; left:590px; top:100px; width:43px; height:113px; z-index:27; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-12.jpg" width="397" height="400"></div>
<div id="a11" style="position:absolute; left:590px; top:100px; width:82px; height:62px; z-index:28; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-04.jpg" width="400" height="400"></div>
<div id="a12" style="position:absolute; left:590px; top:100px; width:57px; height:57px; z-index:29; visibility: hidden;"><img src="../../pic/works/clents-pic/obln-0304fw/o3-13.jpg" width="403" height="400"></div>
</body>
</html>



colordog

职务:普通成员
等级:1
金币:0.0
发贴:53
#32004/11/23 19:39:13
这个是源代码,分析可得,使用了层得显示与隐藏,其原理和大部分菜单相同。



花猫不吃腥

职务:普通成员
等级:1
金币:0.0
发贴:107
#42004/11/24 22:18:35
用框架不一样的可以



肖天

职务:普通成员
等级:1
金币:0.0
发贴:194
#52004/11/25 12:34:45
为什么字是上跳的呢,是加了那个代码呢?



a43146

职务:普通成员
等级:1
金币:0.0
发贴:8
#62004/11/25 16:36:51
字上跳是因为用了css,对于link状态和hover状态给了不同的行高!
你可以自己试一下。



帅哥村党委专职副书记

职务:普通成员
等级:2
金币:3.0
发贴:373
#72004/11/25 17:45:51
a43146在上个帖子中说
引用:
字上跳是因为用了css,对于link状态和hover状态给了不同的行高!
你可以自己试一下。


是换图片啦,over out 两个事件



帅哥村党委专职副书记

职务:普通成员
等级:2
金币:3.0
发贴:373
#82004/11/25 17:46:39
不过代码也太多了吧,自己diy也很简单啊



那个冬天

职务:普通成员
等级:1
金币:0.0
发贴:39
#92004/11/26 20:34:52
厉害



春卷

职务:普通成员
等级:1
金币:13.0
发贴:89
#102004/11/29 16:23:17
flash做会轻松的多吧~



a43146

职务:普通成员
等级:1
金币:0.0
发贴:8
#112004/11/30 20:57:17
绝版英俊在上个帖子中说
引用:
a43146在上个帖子中说
引用:
字上跳是因为用了css,对于link状态和hover状态给了不同的行高!
你可以自己试一下。


是换图片啦,over out 两个事件



可以用CSS实现字上跳的效果,而且简单易学!



zhaoxp169

职务:普通成员
等级:1
金币:0.0
发贴:14
#122004/12/1 1:13:27
好麻烦呀,为什么不用flash?



linwenhe

职务:普通成员
等级:1
金币:0.0
发贴:6
#132004/12/1 12:39:15
用替换图片也可以实现



proxima

职务:普通成员
等级:1
金币:0.0
发贴:8
#142004/12/1 13:59:16
这种页面和一些页面导航菜单是一样的,用MX2004很好实现。