当前位置: 主页->网页特效专栏->页面特效->QQ式的导航
栏目导航
网页特效
  典型特效 状态栏
  游戏类 页面背景
  页面特效 页面导航
  文本操作 文本特效
  图形特效 鼠标特效
  时间日期 密码类
  浏览相关 警告对话
  技巧类 计数转换
  测试搜索 代码生成
  播放音乐 按钮特效
  系统相关 链接特效
  黑客性质 相关特效
  窗口特效 其它特效
最新更新
 
 
 
 
 
 
 
 
 
 
热点文章
 
 
 
 
 
 
 
 
 
 

QQ式的导航

夜鹰电脑教学网 加入日期:2005-04-04 23:48:00 点击数:

查看:[大字体 中字体 小字体]

说明: QQ式的导航

效果: 点这里看效果!

代码: 要完成此效果把如下代码加入到<body>区域中


<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!!
menuBGColor="black";
menuIsStatic="yes";
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.yy0736.com ", "_blank"]
ssmItems[2]=["网页特效", "http://www.yy0736.com/js/","_blank"]
ssmItems[3]=["Flash mv", "http://www.yy0736.com/flash/mv", "_blank"]
ssmItems[4]=["网页制作", "http://www.yy0736.com/webpage", "_blank"]
ssmItems[5]=["图像处理", "http://www.yy0736.com/graphics", "_blank"]
ssmItems[6]=["程序设计", "http://www.yy0736.com/programmer", "_blank"]
buildMenu();
</SCRIPT>
<script>
<!--


//range of glowing
var from = 5;
var to = 11;

//speed of pulsing
var delay = 55;

//color of glow, name or RGB value (example:'#00FF00')
var glowColor = "lime";


//NO MORE EDITING!!!
var i = to;
var j = 0;

//can be called here or whenever you want the text to start pulsing
textPulseDown();

function textPulseUp()
{
if (!document.all)
return
if (i < to)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i++;
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}

if (i = to)
{
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}


}

function textPulseDown()
{
if (!document.all)
return
if (i > from)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}

if (i = from)
{
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
}

//-->
</script>


作者:佚名 来源: 网上转帖  

   

上篇:微软菜单   下篇:凭空取菜单


[夜鹰论坛] [我要留言] [关闭窗口] [ ][TOP]

此文章最新评论(不超过十条)
■评论此文章 ( 有问题请去夜鹰论坛发帖 )
共有评论: 查看全部评论 姓名:
【 声明 】 您所发表的言论将被众多网友阅读,因此,您所发表的言论应不违反中国法律,不违背一般的道德原则,否则,您必须对您的不当言论引发的一切不良后果负责;此外,我们的管理员有权删除您发表的不当言论,谢谢合作!