jquery 實(shí)現(xiàn)兩級(jí)導(dǎo)航菜單附效果圖
更新時(shí)間：2014年03月07日 15:52:27 作者：
兩級(jí)導(dǎo)航菜單在網(wǎng)頁(yè)中非常實(shí)用，實(shí)現(xiàn)的方法也有很多，本文為大家介紹下使用jquery是如何實(shí)現(xiàn)的
主要用于運(yùn)維系統(tǒng)， 對(duì)界面要求不高的場(chǎng)合。 深深感到自己頁(yè)面設(shè)計(jì)能力弱爆了，只能借鑒一下了， 交互邏輯還可以勝任一點(diǎn)。
直接貼代碼:
1. HTML 頁(yè)面及 JS 交互， 注意引入 Jquery 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>兩級(jí)導(dǎo)航菜單的示例</title>
<script src="jquery-1.10.1.min.js"></script>
<!-- moonmm css -->
<link rel="stylesheet" type="text/css" href="two-nav.css" />
<script type="text/javascript">
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
function showtime() {
var date = new Date();
var yy = date.getYear();
if (yy < 1900) {
yy = yy + 1900;
}
var MM = date.getMonth()+1;
if(MM<10) MM = '0' + MM;
var dd = date.getDate();
if(dd<10) dd = '0' + dd;
var hh = date.getHours();
if(hh<10) hh = '0' + hh;
var mm = date.getMinutes();
if(mm<10) mm = '0' + mm;
var ss = date.getSeconds();
if(ss<10) ss = '0' + ss;
var ww = weeks[date.getDay()];
$('#currTime span').html('[ ' + yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss + ' ' + ww + ' ]');
window.setTimeout("showtime()", 1000);
}
var setContentSize = function(height, width) {
$('header').css('width', width);
$('#topnav').css('width', width);
$('#nav').css('width', width);
$('#content').css('height', height + 'px');
$('#content').css('width', width);
$('#maincontent').css('height', height + 'px' );
$('#maincontent').css('width', width);
}
$(document).ready(
function() {
var docHeight = $(document).outerHeight();
var docWidth = $(document).width();
var headerHeight = $('#header').height();
var contentHeight = docHeight-headerHeight;
$('#topnav a').click(
function() {
$('.select').removeClass('select');
$(this).addClass('select');
console.log($(this).css('background-color'));
$('#nav').css('background-color', $(this).css('background-color'));
$('#nav').css('width', $('#topnav').width());
switch(this.id) {
case 'topmenu_home':
$('.nav_list').hide();
$('#homebo').show();
$('#homebo a').first().click();
break;
case 'topmenu_itlearn':
$('.nav_list').hide();
$('#itlearnbo').show();
$('#itlearnbo a').first().click();
break;
case 'topmenu_baike':
$('.nav_list').hide();
$('#baikebo').show();
$('#baikebo a').first().click();
break;
case 'topmenu_scisrc':
$('.nav_list').hide();
$('#scisrcbo').show();
$('#scisrcbo a').first().click();
break;
case 'topmenu_more':
$('.nav_list').hide();
$('#morebo').show();
$('#morebo a').first().click();
break;
default : break;
}
}
);
$('#nav a').click(
function() {
setContentSize(contentHeight, docWidth-15);
$('#nav .select').removeClass('select');
$(this).addClass('select');
switch(this.id) {
case 'myblogModule':
$('#maincontent').attr('src', 'http://blog.csdn.net/lovesqcc');
break;
case 'ifeveModule':
setContentSize(contentHeight+80, docWidth-15);
$('#maincontent').attr('src', 'http://ifeve.com/');
break;
case 'csdnModule':
$('#maincontent').attr('src', 'http://csdn.net');
break;
case 'infoqModule':
$('#maincontent').attr('src', 'http://www.infoq.com/cn/');
break;
case 'boleModule':
$('#maincontent').attr('src', 'http://blog.jobbole.com/');
break;
case 'itcommentModule':
$('#maincontent').attr('src', 'http://www.vaikan.com/');
break;
case 'wikiModule':
$('#maincontent').attr('src', 'http://zh.wikipedia.org/zh-tw/Wikipedia');
break;
case 'zhihuModule':
$('#maincontent').attr('src', 'http://www.zhihu.com/');
break;
case 'acmModule':
$('#maincontent').attr('src', 'http://www.acm.org/');
break;
case 'xiamiModule':
$('#maincontent').attr('src', 'http://www.xiami.com');
break;
case 'opencourseModule':
$('#maincontent').attr('src', 'http://v.163.com/special/ted10collection/');
break;
default:
break;
}
}
);
$('.nav_list').hide();
$('#topmenu_home').click();
showtime();
}
);
</script>
</head>
<body>
<div id="header">
<div id="firstHeader">
<div id="logo"> 兩級(jí)導(dǎo)航菜單 </div>
<div id="target">兩級(jí)導(dǎo)航菜單的示例</div>
<div id="toolbar">
<a href="#" id="userinfo">[ 你好: <span style="color:#f47920">admin</span> ]</a>
<a href="#" id="currTime"><span></span></a>
<a target="_blank"><span style="color:#f47920">[ 提建議 ]</span></a>
</div>
</div>
<div class="clear"></div>
<div id="topnav">
<div class="topnav_list">
<a href="#" class="select" id="topmenu_home"><span>首頁(yè)</span></a>
<a href="#" id="topmenu_itlearn"><span>IT學(xué)習(xí)</span></a>
<a href="#" id="topmenu_baike"><span>百科</span></a>
<a href="#" id="topmenu_scisrc"><span>學(xué)術(shù)資源</span></a>
<a href="#" id="topmenu_more"><span>更多</span></a>
</div>
</div>
<div class="clear"></div>
<div id="nav">
<div class="nav_list" id="homebo">
<a href="#" class="select" id="myblogModule"><span>我的博客</span></a>
</div>
<div class="nav_list" id="itlearnbo">
<a href="#" class="select" id="ifeveModule"><span>并發(fā)編程網(wǎng)</span></a>
<a href="#" id="csdnModule"><span>CSDN</span></a>
<a href="#" id="infoqModule"><span>Infoq</span></a>
<a href="#" id="boleModule"><span>伯樂(lè)在線(xiàn)</span></a>
<a href="#" id="itcommentModule"><span>外刊評(píng)論</span></a>
</div>
<div class="nav_list" id="baikebo">
<a href="#" class="select" id="wikiModule"><span>WIKI百科</span></a>
<a href="#" id="zhihuModule"><span>知乎</span></a>
</div>
<div class="nav_list" id="scisrcbo">
<a href="#" class="select" id="acmModule"><span>ACM</span></a>
</div>
<div class="nav_list" id="morebo">
<a href="#" class="select" id="xiamiModule"><span>蝦米音樂(lè)</span></a>
<a href="#" id="opencourseModule"><span>網(wǎng)易公開(kāi)課</span></a>
</div>
</div>
</div>
<div id="content">
<iframe id="maincontent" frameborder="0" width="100%"></iframe>
</div>
</body>
</html>
2. CSS 文件
[css] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
div:not(#topnav, #logo){font-size:10pt!important}
*{font-family: 微軟雅黑, 宋體, san-serif!important}
/*
* Header CSS
*/
a{color:#2F649A;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:none;}
body {
background-color: #dae7f6;
margin: -0px -0px;
}
#firstHeader {
height: 56px;
}
#logo {
float: left;
font-size: 28pt;
margin: 10px 0px 10px 20px;
font-family: 隸書(shū), 微軟雅黑, 宋體, san-serif!important;
}
#target {
float: left;
font-size: 10.5pt;
font-style: italic;
font-weight: 1.5em;
margin: 25px 30px 0px 5px;
}
#toolbar {
float: right;
margin: 0px 3px;
}
#toolbar a {
font-size: 10pt;
}
#content {
background-color: #45b97c;
}
/* the top menu */
#topnav {
float: left;
background-color: #426ab3;
width: 100%;
}
#topnav .topnav_list {
float:left; width: 100%; height:29px; color:#333; margin: 0px 0px -1px 0px;
font-size: 11pt!important; font-weight:bold;
border-radius: 5px;
}
#topnav .topnav_list a {
display:inline-block; height:24px; padding: 2px 0 2px 18px;
color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer;
border-radius: 5px; border-right: 2px outset #00BFFF;
}
#topnav .topnav_list a span {
display:inline-block; height:22px; padding:0 20px 0 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
position:relative; z-index:9;
background-color: #45b97c;
color:#fff; text-decoration:none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#topnav .topnav_list a:hover span, #topnav .topnav_list a.select span {
background-color: #45b97c;
color:#fff;
border-radius: 5px;
}
.clear {
clear: both;
}
/* the first menu */
#nav {
font-size: 10pt;
}
#nav .nav_list {
float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px;
}
#nav .nav_list a {
display:inline-block;
padding: 2px 15px 2px 15px;
color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a span {
display:inline-block;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a:hover, #nav .nav_list a.select {
position:relative; z-index:9;
text-decoration:none;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a:hover, #nav .nav_list a:hover span {
background-color: #007d65;
color: #fff;
}
#nav .nav_list a.select, #nav .nav_list a.select span {
background-color: #fff;
color: #ca0000;
}
3. 效果圖
直接貼代碼:
1. HTML 頁(yè)面及 JS 交互， 注意引入 Jquery 文件
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>兩級(jí)導(dǎo)航菜單的示例</title>
<script src="jquery-1.10.1.min.js"></script>
<!-- moonmm css -->
<link rel="stylesheet" type="text/css" href="two-nav.css" />
<script type="text/javascript">
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
function showtime() {
var date = new Date();
var yy = date.getYear();
if (yy < 1900) {
yy = yy + 1900;
}
var MM = date.getMonth()+1;
if(MM<10) MM = '0' + MM;
var dd = date.getDate();
if(dd<10) dd = '0' + dd;
var hh = date.getHours();
if(hh<10) hh = '0' + hh;
var mm = date.getMinutes();
if(mm<10) mm = '0' + mm;
var ss = date.getSeconds();
if(ss<10) ss = '0' + ss;
var ww = weeks[date.getDay()];
$('#currTime span').html('[ ' + yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss + ' ' + ww + ' ]');
window.setTimeout("showtime()", 1000);
}
var setContentSize = function(height, width) {
$('header').css('width', width);
$('#topnav').css('width', width);
$('#nav').css('width', width);
$('#content').css('height', height + 'px');
$('#content').css('width', width);
$('#maincontent').css('height', height + 'px' );
$('#maincontent').css('width', width);
}
$(document).ready(
function() {
var docHeight = $(document).outerHeight();
var docWidth = $(document).width();
var headerHeight = $('#header').height();
var contentHeight = docHeight-headerHeight;
$('#topnav a').click(
function() {
$('.select').removeClass('select');
$(this).addClass('select');
console.log($(this).css('background-color'));
$('#nav').css('background-color', $(this).css('background-color'));
$('#nav').css('width', $('#topnav').width());
switch(this.id) {
case 'topmenu_home':
$('.nav_list').hide();
$('#homebo').show();
$('#homebo a').first().click();
break;
case 'topmenu_itlearn':
$('.nav_list').hide();
$('#itlearnbo').show();
$('#itlearnbo a').first().click();
break;
case 'topmenu_baike':
$('.nav_list').hide();
$('#baikebo').show();
$('#baikebo a').first().click();
break;
case 'topmenu_scisrc':
$('.nav_list').hide();
$('#scisrcbo').show();
$('#scisrcbo a').first().click();
break;
case 'topmenu_more':
$('.nav_list').hide();
$('#morebo').show();
$('#morebo a').first().click();
break;
default : break;
}
}
);
$('#nav a').click(
function() {
setContentSize(contentHeight, docWidth-15);
$('#nav .select').removeClass('select');
$(this).addClass('select');
switch(this.id) {
case 'myblogModule':
$('#maincontent').attr('src', 'http://blog.csdn.net/lovesqcc');
break;
case 'ifeveModule':
setContentSize(contentHeight+80, docWidth-15);
$('#maincontent').attr('src', 'http://ifeve.com/');
break;
case 'csdnModule':
$('#maincontent').attr('src', 'http://csdn.net');
break;
case 'infoqModule':
$('#maincontent').attr('src', 'http://www.infoq.com/cn/');
break;
case 'boleModule':
$('#maincontent').attr('src', 'http://blog.jobbole.com/');
break;
case 'itcommentModule':
$('#maincontent').attr('src', 'http://www.vaikan.com/');
break;
case 'wikiModule':
$('#maincontent').attr('src', 'http://zh.wikipedia.org/zh-tw/Wikipedia');
break;
case 'zhihuModule':
$('#maincontent').attr('src', 'http://www.zhihu.com/');
break;
case 'acmModule':
$('#maincontent').attr('src', 'http://www.acm.org/');
break;
case 'xiamiModule':
$('#maincontent').attr('src', 'http://www.xiami.com');
break;
case 'opencourseModule':
$('#maincontent').attr('src', 'http://v.163.com/special/ted10collection/');
break;
default:
break;
}
}
);
$('.nav_list').hide();
$('#topmenu_home').click();
showtime();
}
);
</script>
</head>
<body>
<div id="header">
<div id="firstHeader">
<div id="logo"> 兩級(jí)導(dǎo)航菜單 </div>
<div id="target">兩級(jí)導(dǎo)航菜單的示例</div>
<div id="toolbar">
<a href="#" id="userinfo">[ 你好: <span style="color:#f47920">admin</span> ]</a>
<a href="#" id="currTime"><span></span></a>
<a target="_blank"><span style="color:#f47920">[ 提建議 ]</span></a>
</div>
</div>
<div class="clear"></div>
<div id="topnav">
<div class="topnav_list">
<a href="#" class="select" id="topmenu_home"><span>首頁(yè)</span></a>
<a href="#" id="topmenu_itlearn"><span>IT學(xué)習(xí)</span></a>
<a href="#" id="topmenu_baike"><span>百科</span></a>
<a href="#" id="topmenu_scisrc"><span>學(xué)術(shù)資源</span></a>
<a href="#" id="topmenu_more"><span>更多</span></a>
</div>
</div>
<div class="clear"></div>
<div id="nav">
<div class="nav_list" id="homebo">
<a href="#" class="select" id="myblogModule"><span>我的博客</span></a>
</div>
<div class="nav_list" id="itlearnbo">
<a href="#" class="select" id="ifeveModule"><span>并發(fā)編程網(wǎng)</span></a>
<a href="#" id="csdnModule"><span>CSDN</span></a>
<a href="#" id="infoqModule"><span>Infoq</span></a>
<a href="#" id="boleModule"><span>伯樂(lè)在線(xiàn)</span></a>
<a href="#" id="itcommentModule"><span>外刊評(píng)論</span></a>
</div>
<div class="nav_list" id="baikebo">
<a href="#" class="select" id="wikiModule"><span>WIKI百科</span></a>
<a href="#" id="zhihuModule"><span>知乎</span></a>
</div>
<div class="nav_list" id="scisrcbo">
<a href="#" class="select" id="acmModule"><span>ACM</span></a>
</div>
<div class="nav_list" id="morebo">
<a href="#" class="select" id="xiamiModule"><span>蝦米音樂(lè)</span></a>
<a href="#" id="opencourseModule"><span>網(wǎng)易公開(kāi)課</span></a>
</div>
</div>
</div>
<div id="content">
<iframe id="maincontent" frameborder="0" width="100%"></iframe>
</div>
</body>
</html>
2. CSS 文件
[css] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
div:not(#topnav, #logo){font-size:10pt!important}
*{font-family: 微軟雅黑, 宋體, san-serif!important}
/*
* Header CSS
*/
a{color:#2F649A;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:none;}
body {
background-color: #dae7f6;
margin: -0px -0px;
}
#firstHeader {
height: 56px;
}
#logo {
float: left;
font-size: 28pt;
margin: 10px 0px 10px 20px;
font-family: 隸書(shū), 微軟雅黑, 宋體, san-serif!important;
}
#target {
float: left;
font-size: 10.5pt;
font-style: italic;
font-weight: 1.5em;
margin: 25px 30px 0px 5px;
}
#toolbar {
float: right;
margin: 0px 3px;
}
#toolbar a {
font-size: 10pt;
}
#content {
background-color: #45b97c;
}
/* the top menu */
#topnav {
float: left;
background-color: #426ab3;
width: 100%;
}
#topnav .topnav_list {
float:left; width: 100%; height:29px; color:#333; margin: 0px 0px -1px 0px;
font-size: 11pt!important; font-weight:bold;
border-radius: 5px;
}
#topnav .topnav_list a {
display:inline-block; height:24px; padding: 2px 0 2px 18px;
color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer;
border-radius: 5px; border-right: 2px outset #00BFFF;
}
#topnav .topnav_list a span {
display:inline-block; height:22px; padding:0 20px 0 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
position:relative; z-index:9;
background-color: #45b97c;
color:#fff; text-decoration:none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#topnav .topnav_list a:hover span, #topnav .topnav_list a.select span {
background-color: #45b97c;
color:#fff;
border-radius: 5px;
}
.clear {
clear: both;
}
/* the first menu */
#nav {
font-size: 10pt;
}
#nav .nav_list {
float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px;
}
#nav .nav_list a {
display:inline-block;
padding: 2px 15px 2px 15px;
color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a span {
display:inline-block;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a:hover, #nav .nav_list a.select {
position:relative; z-index:9;
text-decoration:none;
border-radius: 8px;
border-radius: 8px;
}
#nav .nav_list a:hover, #nav .nav_list a:hover span {
background-color: #007d65;
color: #fff;
}
#nav .nav_list a.select, #nav .nav_list a.select span {
background-color: #fff;
color: #ca0000;
}
3. 效果圖
您可能感興趣的文章:
- JQuery 寫(xiě)的個(gè)性導(dǎo)航菜單
- jquery實(shí)現(xiàn)個(gè)人中心導(dǎo)航菜單效果和美觀都非常不錯(cuò)
- jQuery 浮動(dòng)導(dǎo)航菜單適合購(gòu)物商品類(lèi)型的網(wǎng)站
- jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果
- jQuery實(shí)現(xiàn)個(gè)性翻牌效果導(dǎo)航菜單的方法
- jquery實(shí)現(xiàn)無(wú)限分級(jí)橫向?qū)Ш讲藛蔚姆椒?/a>
- jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單實(shí)例
- jQuery垂直多級(jí)導(dǎo)航菜單代碼分享
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jquery實(shí)現(xiàn)具有收縮功能的垂直導(dǎo)航菜單
相關(guān)文章
實(shí)用的Jquery選項(xiàng)卡TAB示例代碼
Jquery選項(xiàng)卡想必大家并不陌生，本文為大家介紹個(gè)比較實(shí)用的jquery TAB選項(xiàng)卡，喜歡的朋友可以學(xué)習(xí)下2013-08-08
jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能,涉及jQuery針對(duì)網(wǎng)頁(yè)DOM節(jié)點(diǎn)的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
在IE瀏覽器下，一般的ajax的方法都是cache等于true的，下面有幾個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11
jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法,可實(shí)現(xiàn)實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運(yùn)動(dòng)的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
今天在項(xiàng)目中用到了一個(gè)很好的div彈出層效果，jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景，效果非常棒，拿出來(lái)和大家一起分享！2015-04-04
使用jQuery的toggle()方法對(duì)HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)
本文通過(guò)示例給大家介紹了使用jQuery的toggle()方法對(duì)HTML標(biāo)簽進(jìn)行顯示、隱藏操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
jQuery Ajax請(qǐng)求狀態(tài)管理器打包
現(xiàn)在的網(wǎng)站，在一個(gè)網(wǎng)頁(yè)中有異步請(qǐng)求甚至許多個(gè)異步請(qǐng)求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能，使網(wǎng)頁(yè)應(yīng)用更接近于桌面應(yīng)用2012-05-05
jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄詳細(xì)代碼
之前做項(xiàng)目的時(shí)候，一直都想著做一個(gè)上下滾動(dòng)的公告欄，作為展示網(wǎng)站的最新公告信息，給用戶(hù)帶來(lái)極好的用戶(hù)體驗(yàn)，下面小編通過(guò)實(shí)例代碼給大家分享基于jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄，感興趣的朋友一起看看吧2018-11-11
jQuery 處理網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼
改變頁(yè)面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁(yè)面元素或者添加新的HTML元素。2010-02-02