导航鼠标特效

liuxiang822

浏览: 48196 次
性别:
来自: 常州

最近访客更多访客>>

th414

wnly2027

tobeno1

hzj1989

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS JavaScript 公告 JSP Cache

话不多说，先上html代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'navigation.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="css/style04/module/navigation.css">
	<script type="text/javascript" src="js/jquery1.4.js"></script>
	<script type="text/javascript" language="javascript" src="js/style04/navigation.js" charset="gb2312"></script>
  </head>
  
  <body>
    <div class="navigation">    	
    	<div class="navigation_left"></div>
    	<ul>
    	<li class="selected">网站首页</li>
    	<li >通知公告</li>
    	<li >平台介绍</li>
    	<li >成果资源</li>
    	<li >推荐专家</li>
    	<li >展会活动</li>
    	<li >政策法规</li>
    	<li >相关下载</li>
    	</ul>
    	<div class="navigation_text_right"></div>
    	<div id="Clock" class="navigation_right"></div>    	
    </div>
  </body>
</html>

js代码：

function tick() {
	var dateString;
	var day = "";
	var month = "";
	var ampm = "";
	var ampmhour = "";
	var myweekday = "";
	var year = "";
	mydate = new Date();
	myweekday = mydate.getDay();
	mymonth = mydate.getMonth() + 1;
	myday = mydate.getDate();
	myyear = mydate.getYear();
	year = (myyear > 200) ? myyear : 1900 + myyear;
	if (myweekday == 0)
		weekday = "&nbsp;星期天";
	else if (myweekday == 1)
		weekday = "&nbsp;星期一 ";
	else if (myweekday == 2)
		weekday = "&nbsp;星期二";
	else if (myweekday == 3)
		weekday = "&nbsp;星期三";
	else if (myweekday == 4)
		weekday = "&nbsp;星期四";
	else if (myweekday == 5)
		weekday = "&nbsp;星期五";
	else if (myweekday == 6)
		weekday = "&nbsp;星期六";
	dateString = year + "年" + mymonth + "月" + myday + "日" + weekday;
	$("#Clock").html(dateString);
}
window.onload = tick;

$(function() {
	var $div_li = $(".navigation ul li");
	$div_li.click(function() {
		$(this).addClass("selected") //当前<li>元素高亮
				.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮	            				
		}).hover(function() {
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	})
})

css代码：

@CHARSET "UTF-8";
.navigation{
	width:1000px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_bg.jpg");
	background-repeat: repeat-x;
}
.navigation_left{
	float:left;
	width:21px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_left.jpg");
	background-repeat: no-repeat;	
	background-position: left;
}
.navigation li{
	float:left;
	list-style: none;
	width:90px;
	height:35px;	
	font-size: 14px;
	line-height: 35px;
	font-weight: bold;
	color:#FFF;
	text-align: center;	
	cursor:pointer;
}
.navigation li.selected{
	float:left;
	list-style: none;
	width:90px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_text_bg.jpg");
	background-repeat: no-repeat;
	font-size: 14px;
	line-height: 35px;
	font-weight: bold;
	color:#823001;
	text-align: center;
}
.navigation li.hover{
	background:#DFDFDF;
}
.navigation_text_left{
	float:left;
	list-style: none;
	width:92px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_text_left.jpg");
	background-repeat: no-repeat;
	background-position: left;
	font-size: 14px;
	line-height: 35px;
	font-weight: bold;
	text-align: center;
	color:#FFF;
}
.navigation_text_left:hover{
	float:left;
	width:90px;
	height:35px;
	background-color:red;
	font-size: 14px;
	line-height: 35px;
	font-weight: bold;
	text-align: center;
	color:red;
}
.navigation_right{
	float:right;
	width:166px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_right.jpg");
	background-repeat: no-repeat;
	background-position: right;
	font-size: 13px;
	line-height: 35px;
	color:#FCFD86;
}
.navigation_text_right{
	float:left;
	width:45px;
	height:35px;
	background-image: url("../../../images/style04/module/navigation_text_left.jpg");
	background-repeat: no-repeat;
	background-position: right;
}

分享到：