技术文章
当前位置:首页 > 技术文章

jquery网站导航背景跟随鼠标效果/导航鼠标效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery网站导航背景跟随鼠标效果/导航鼠标效果</title>
<meta name="keywords" content="jquery网站导航背景跟随鼠标效果/导航鼠标效果" />
<meta name="description" content="jquery网站导航背景跟随鼠标效果/导航鼠标效果" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style type="text/css">
body {margin:0px;padding:0px;background:#f6f6f6;}
div,dl,dd {
list-style: none; margin: 0px; padding: 0px; color: #000000; font-family: Arial; font-size: 12px; text-decoration: none;
}
#navwraper
{float:left;width:1200px;height:40px;position: relative; z-index: 49;}
#nav
{float:left;width:1200px;height:40px;position: relative;}
#nav dd
{float:left;width:98px;height:40px;position: relative;line-height:40px;text-align:center;}
#nav dt {float:left;width: 98px; height: 40px; position: relative;}
#nav dd a {cursor:pointer;}
#nav dd a:hover {font-weight: bold;}
#nav dd b {left: 78%; top: -18%; width: 18px; height: 20px; overflow: hidden; display: block; position: absolute; z-index: 2;}
#nav dt {background: url("http://www.lantou.net/web/jquery/navfbg.jpg") no-repeat 0px 0px; left: 0px; top: 0px; width: 98px; position: absolute; z-index: -1;}
#nav dt a span {width: 98px; text-align: center; color: rgb(255, 255, 255); line-height: 40px; float: left; display: block;}
#nav dt a em {background: url("http://www.lantou.net/web/jquery/navfbg.jpg") no-repeat right 0px; top: 0px; width: 2px; height: 40px; right: 0px; display: block; position: absolute;}
#navmenu {left: 0px; top: 40px; position: absolute; z-index: 2;}
#navmenu dl {left: 0px; top: 0px; width: 171px; padding-top: 8px; display: none; position: absolute;}
#navmenu dd {padding: 0px 15px; height: 30px;}
#navmenu dd a {height: 30px; line-height: 30px; display: block; cursor: pointer;}
#navmenu dt {height: 30px;}
</style>
</head>
<body>
<div id="navwraper">
<dl id="nav">
<dd><a href="http://www.lantou.net" title="首页">首页</a></dd>
<dd class="curr"><a href="http://www.lantou.net/aboutus" title="关于我们">关于我们</a></dd>
<dd><a href="http://www.lantou.net/shop" title="商城系统">商城系统</a><b></b></dd>
<dd><a href="http://www.lantou.net/product" title="WEB开发">WEB开发</a><b></b></dd>
<dd><a href="http://www.lantou.net/project" title="项目定制">项目定制</a><b></b></dd>
<dd><a href="http://www.lantou.net/download" title="资源下载">资源下载</a></dd>
<dd><a href="http://www.lantou.net/forums" title="技术文章">技术文章</a><b></b></dd>
<dd><a href="http://www.lantou.net/sitemap" title="网站地图" target="_blank">网站地图</a></dd>
</dl>
</div>
<script type="text/javascript" src="http://www.lantou.net/web/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var speed = 250;
navScroll(fnEach($("#navwraper")), fnEach($("#nav")), fnEach($("#navmenu")), "dd", "dt", speed, "curr");
function fnEach(Dom) {
if (Dom.length != 0) {
return Dom;
} else {
return $(null);
};
};
function sfnSrollTop(o, d, e, v) {
o.stop().animate({ scrollTop: v }, { duration: d, easing: e });
return false;
};
function navScroll(navwrap, Dom, Menu, list, curr, speed, defClass) {
var $list = Dom.find(list),
listLen = $list.length,
$menuList = Menu.find("dl"),
menuLen = $menuList.length;
i = 0, arrListInfo = [],
bool = true,
currIdx = 0;
for (i = 0; i < listLen; i++) {
var othis = $list.eq(i),
sPath = othis.find("a").attr("href"),
sText = othis.text(),
nPosX = othis.position().left, z;
arrListInfo.push([sText, nPosX, sPath]);
if (othis.hasClass(defClass) && bool) {
Dom.append("<dt style=\"display:none;left:" + nPosX + "px;\"><a href=\"" + sPath + "\"><span>" + sText + "</span><em></em></a></dt>")
.find(curr)
.fadeIn(200);
bool = false;
currIdx = i;
};
for (z = 0; z < menuLen; z++) {
var omenu = $menuList.eq(z);
if (Number(omenu.attr("name")) == i) {
omenu.css("left", nPosX)
.find("dd:last a").css("background", "none");
};
};
};
setTimeout(function () {
$list.bind("mouseover", function () {
var index = $(this).index();
fnAnimate(Dom, arrListInfo, index, $menuList, true);
return false;
});
navwrap.bind("mouseleave", function () {
$menuList.fadeOut(speed);
fnAnimate(Dom, arrListInfo, currIdx, $menuList, false);
return false;
});
}, speed);
function fnMenuShow(d, y) {
if (y != -1) {
d.eq(y).fadeIn(speed).siblings().fadeOut(speed);
};
return false;
};
function fnAnimate(d, a, x, m, b) {
d.find(curr)
.stop()
.animate({
"left": a[x][1]
}, speed, function () {
$(this).find("a")
.attr("href", a[x][2])
.find("span")
.text(a[x][0])
//.fadeIn(100);
if (b) {
m.fadeOut(speed);
fnMenuShow(m, x - 1);
};
})
.find("span")
.hide();
return false;
};
return false;
};
});
</script>
</body>
</html>
演示地址:http://www.lantou.net/web/jquery/jquery_nav_swith_bgimage.html