鼠标悬停时反白显示的导航条代码(原创)

简介: //说明:在引用文件的相应位置,写入//MenuItem使用说明:第一个参数为链接显示内容,可以为图片,如果为图片,则内容格式为//来源:http://blog.csdn.net/54powerman//作者:彗星撞地球//联系方式:54powerman@163.com//          如果第二个参数和当前网页的名字相同,则反白显示该项,而且取消链接,以说明本页为导航条当前页。

//说明:在引用文件的相应位置,写入<script src="menu.js" type="text/javascript"></script>
//MenuItem使用说明:第一个参数为链接显示内容,可以为图片,如果为图片,则内容格式为<IMG SRC=图片路径>
//来源:http://blog.csdn.net/54powerman
//作者:彗星撞地球
//联系方式:54powerman@163.com
//          如果第二个参数和当前网页的名字相同,则反白显示该项,而且取消链接,以说明本页为导航条当前页。
//..........................................

var str;
var ColorOriginal,ColorLast;
var FontSize,FontColor;
//..........................................基本参数配置开始
ColorOriginal="#00537F";
ColorLast="#7C91A2";
FontSize=12;//单位为象素
FontColor="White";//文字链接颜色
//..........................................基本参数配置结束
str=MenuTop();
//..........................................菜单项开始
str+=MenuItem("项目1","home.html");
str+=MenuItem("<IMG SRC=general_images/general_03_1.jpg>","2");
str+=MenuItem("项目2","2");
str+=MenuItem("项目2","2");
//..........................................菜单项结束
str+=MenuBottom();
document.write(str);
//函数定义开始
function SwapBGColor(x)
{
 x.bgColor=ColorLast;
}
function ReturnBGColor(x)
{
 x.bgColor=ColorOriginal;
}
function CurrentFileName()
{
  return document.location.toString();
}
function GetFileName(url)
{
 filename=url.substr(url.lastIndexOf("/")+1);
 return filename;
}
function MenuItem(content,url)
{
 urlfilename=GetFileName(CurrentFileName());
 linkfilename=GetFileName(url);
 var str;
 if (urlfilename==(linkfilename))
 {
  str="        <td bgcolor=/""+ColorLast+"/">"+content+"</td>";
 }
 else
 {
  str="        <td onMouseMove=/"SwapBGColor(this);/" onMouseOut=/"ReturnBGColor(this);/" bgcolor=/""+ColorOriginal+"/"><a href="+url+"><font color="+FontColor+">"+content+"</font></a></td>";
 }
 return str;
}
function MenuTop()
{
 var str;
 str="<table width=/"100%/"  border=/"0/" cellspacing=/"1/" cellpadding=/"1/">";
 str+="      <tr align=/"center/" style=/"color:"+FontColor+";font-size:"+FontSize+" px;/">";
 return str;
}
function MenuBottom()
{
 var str;
 str="      </tr>";
 str+="    </table>";
 return str;
}
//函数定义结束

目录
相关文章
|
4月前
|
存储 前端开发 JavaScript
实现鼠标悬停显示书名、作者和价格的悬浮提示框功能
实现鼠标悬停显示书名、作者和价格的悬浮提示框功能
|
10月前
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
395 0
|
2月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
页面底部悬浮广告或关注公众号代码
页面底部悬浮广告或关注公众号代码
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
4月前
|
Web App开发
解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题
解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题
|
JavaScript 前端开发 API
前端|获取网页中鼠标选中文字
前端|获取网页中鼠标选中文字
223 0
|
搜索推荐
cnblog博客园自定义样式修改标签页的icon图标
cnblog博客园自定义样式修改标签页的icon图标
103 0
|
缓存 JavaScript 前端开发
如何解决超链接被点击后hover样式不出现的问题?
如何解决超链接被点击后hover样式不出现的问题?
677 0