| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 6157 人关注过本帖
标题:无聊找了点网页特效代码!!
取消只看楼主 加入收藏
oヤ偽妳變壞
Rank: 2
等 级:新手上路
威 望:4
帖 子:2251
专家分:0
注 册:2006-3-19
收藏
得分:0 

会浮动的导航
要完成此效果把如下代码加入到<head>区域中

<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT>
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = document.body.scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}
else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

</SCRIPT>

<SCRIPT>
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="站内导航菜单"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["站内导航"] //create header
ssmItems[1]=["本站首页", "http://www.jsshow.com", ""]
ssmItems[2]=["脚本分类", "#",""]
ssmItems[3]=["教程分类", "#", ""]
ssmItems[4]=["另类下载", "#", "_blank"]
ssmItems[5]=["有间聊栈", "#", ""]
ssmItems[6]=["关于我们", "#", ""]

ssmItems[7]=["FAQ", "#", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "#", "",1]

ssmItems[9]=["友情链接", "", ""] //create header
ssmItems[10]=["Hot Link", "#", ""]
ssmItems[11]=["Hot Link", "#", ""]
ssmItems[12]=["Hot Link", "#", ""]

buildMenu();
</SCRIPT>

2006-04-28 19:21
oヤ偽妳變壞
Rank: 2
等 级:新手上路
威 望:4
帖 子:2251
专家分:0
注 册:2006-3-19
收藏
得分:0 

导航菜单特效
要完成此效果需要两个步骤

第一步:把如下代码加入到<head>区域中

<style>
<!-- Begin
.BorderOn { width:90px;
margin-left:10px;
border:1px solid #456789 }
.BorderOff { width:90px;
margin-left:0px;
border:1px solid #444444 }
A.mBlue:link {color:#00CCFF; text-decoration:none;}
A.mBlue:visited {color:#00CCFF; text-decoration:none;}
A.mBlue:active {color:#00CCFF; text-decoration:none;}
A.mBlue:hover {color:#FF0000; text-decoration:underline;}
A.mGreen:link {color:#00FF80; text-decoration:none;}
A.mGreen:visited {color:#00FF80; text-decoration:none;}
A.mGreen:active {color:#00FF80; text-decoration:none;}
A.mGreen:hover {color:#FF0000; text-decoration:underline;}
A.mYellow:link {color:#FFFF00; text-decoration:none;}
A.mYellow:visited {color:#FFFF00; text-decoration:none;}
A.mYellow:active {color:#FFFF00; text-decoration:none;}
A.mYellow:hover {color:#FF0000; text-decoration:underline;}
//-->
</style>
<script language="JavaScript1.2">
<!-- Begin
offMessage = "Add this menu to your site!"
function boxOn(which,message) {
if (document.all||document.getElementById) {
which.className = 'BorderOn';
if (document.getElementById) {
document.getElementById("Message").innerHTML = message
}
else {
Message.innerHTML = message;
}
}
}
function boxOff(which) {
if (document.all||document.getElementById) {
which.className = 'BorderOff';
if (document.getElementById) {
document.getElementById("Message").innerHTML = offMessage
}
else {
Message.innerHTML = offMessage;
}
}
}
// End -->
</script>

第二步:如下代码加入到<body>区域中

<table cellpadding="0" cellspacing="0" width="100">
<tr>
<td align="center">
<!-- Header Table // -->
<table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff">
<tr bgcolor="#999999">
<td>
<div align="center"><font color="#FEDCBA" size="2" face="Arial">主菜单</font></div>
</td>
</tr>
</table>
<!-- End Header Table //-->
<!-- Menu Items Tables
- To add more, just follow the pattern
- Note class= in each <a href> to attach link style colors
//-->
<!-- Menu Item One Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Visit the JavaScript Source')" onMouseout="boxOff(this)">
<tr bgcolor="#999999">
<td>
<div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="link.htm" target="_blank">分类一</a></font>
</div>
</td>
</tr>
</table>
<!-- Menu Item Two Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 2')" onMouseout="boxOff(this)">
<tr bgcolor="#999999">
<td>
<div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="http://www.jojoo.net/" target="_blank">分类二</a></font>
</div>
</td>
</tr>
</table>
<!-- Menu Item Three Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 3')" onMouseout="boxOff(this)">
<tr bgcolor="#999999">
<td>
<div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mGreen" href="http://www.jojoo.net/bb/" target="_blank">分类三</a></font></div>
</td>
</tr>
</table>
<!-- Menu Item Four Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 4')" onMouseout="boxOff(this)">
<tr bgcolor="#999999">
<td>
<div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mYellow" href="http://www.jojoo.net/ts/" target="_blank">分类四</a></font></div>
</td>
</tr>
</table>
<!-- End Menu Items Tables //-->
<!-- Message Table //-->
<!-- Set the width= of this table the same as the overall width in the <style> //-->
<table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90">
<tr bgcolor="#999999">
<td> <!-- Set the width= of this table to the overall width
in the style table minus 2x the border width; set
the height= long (large) enough to accommodate your
longest message //-->
<table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100">
<tr bgcolor="#999999">
<td align="left" valign="top"> <font id="Message" color="#CBA987" size="2" face="Arial">Move
your mouse over the menu items.</font> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Message Table //-->
</td>
</tr>
</table>

2006-04-28 19:26
oヤ偽妳變壞
Rank: 2
等 级:新手上路
威 望:4
帖 子:2251
专家分:0
注 册:2006-3-19
收藏
得分:0 
以后还有多的 继续和大家分享!!
2006-04-28 19:38
oヤ偽妳變壞
Rank: 2
等 级:新手上路
威 望:4
帖 子:2251
专家分:0
注 册:2006-3-19
收藏
得分:0 

知道了!下次一定注意!!!

2006-04-29 23:51
快速回复:无聊找了点网页特效代码!!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.022552 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved