本文目錄一覽：
網頁導航，JS代碼問題。
回去了，明天來給你回答~~
補充：
你這個代碼我看了也沒有看明白你要完成什麼功能，但你說的那個鼠標移走就彈回「歡迎你」我想到的就是設置一個div塊，在這個div塊里加入「歡迎你」然後在function mover(object)中設置div的style.display=”none”，在function mout(object)函數中設置div的style.display=””。
不知道你能不能完成。
用以下的代碼，用css和js寫出動態導航欄
純css也是可以的，c3的內容。
現在普遍用js做動畫效果，兼容問題。
但是。。。由於移動的開發趨勢，並且移動端全面支持c3，js動畫就普遍弱化了，就連jquery3版本的都不再支持js動畫API
所以，目前來看c3在動畫上更勝一籌。
JS或Jquery動態改變導航欄樣式
簡單的插件代碼如下：
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
title動態導航插件/title
style type=”text/css”
!–
body, td, th {
font-size: 14px;
background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*導航默認樣式，可根據實際情況修改*/
* {
margin:0;
padding:0
}
.nav {
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
}
.nav li {
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /*建議此高度大於等於裏面的a標籤高度*/
float:left;
}
.nav li span {
display:inline-block;
overflow:hidden
}
.nav li a {
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
}
/*鼠標經過時樣式*/
.nav li a.over {
background-color:#666;
color:#FFF
}
—
/style
script type=text/javascript src=””/script
script type=”text/javascript”
(function($){
$.fn.dynamicNav=function(options){
//默認配置
var defaults = {
direction:”up”, //動畫切換方向，總共4種up 、down 、left 、right
duration:100 //三種預定速度之一的字符串(“slow”, “normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)
};
// 覆蓋默認配置
var opts = $.extend(defaults, options);
this.each(function(){
var navList=$(this).find(“li”),
navLink=navList.find(“a”);
//在a標籤外側插入span
navList.wrapInner(“span/span”);
var span=navLink.parent();
//判斷是否垂直切換
if(opts.direction==”up” || opts.direction==”down”){
var v=true;
}
//判斷是否改變span初始位置及a樣式
if(opts.direction==”right” || opts.direction==”down”){
var restSpan=true;
}
navLink.each(function(){
//獲取a高度和寬度
var w=$(this).outerWidth(),
p=$(this).parent();
//初始複製現有a標籤
$(this).clone().appendTo(p).addClass(“over”);
//如果是垂直切換
if(v){
p.css(“width”,w);
}else{
p.css(“width”,2*w).parent().css(“width”,w);
}
});
//如果向右或向下切換，改變span初始位置及a樣式
if(restSpan){
span.each(function(){
if(opts.direction==”right”){
$(this).css({“margin-left”:-$(this).outerWidth()/2});
}
if(opts.direction==”down”){
$(this).css({“margin-top” : -$(this).outerHeight()/2});
}
$(this)
.find(‘a’)
.last()
.removeClass(“over”)
.prev()
.addClass(“over”);
});
}
//鼠標經過時動畫函數
function over(o){
o.animate(v?{“margin-top”: -o.outerHeight()/2}:{“margin-left”: -o.outerWidth()/2}, opts.duration);
}
//鼠標移開時動畫函數
function out(o){
o.animate(v?{“margin-top”:0}:{“margin-left”: 0}, opts.duration);
}
//鼠標經過和離開
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});
});
};
})(jQuery);
$(function(){
//向左
$(“#nav1”).dynamicNav({
direction:”left”, //動畫切換方向，總共4種up 、down 、left 、right
duration:300 //三種預定速度之一的字符串(“slow”, “normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)
});
//向右
$(“#nav2”).dynamicNav({
direction:”right”,
duration:200
});
//向上
$(“#nav3”).dynamicNav({
direction:”up”,
duration:100
});
//向下
$(“#nav4”).dynamicNav({
direction:”down”,
duration:400
});
});
/script
/head
body
h1向左（速度300毫秒）/h1
ul class=”nav” id=”nav1″
lia href=””首頁/a/li
lia href=””前端技術/a/li
lia href=””視覺設計/a/li
lia href=””文章歸檔/a/li
lia href=””工具/書籍/a/li
lia href=””關於我/a/li
/ul
h1向右（速度200毫秒）/h1
ul class=”nav” id=”nav2″
lia href=””首頁/a/li
lia href=””前端技術/a/li
lia href=””視覺設計/a/li
lia href=””文章歸檔/a/li
lia href=””工具/書籍/a/li
lia href=””關於我/a/li
/ul
h1向上（速度100毫秒）/h1
ul class=”nav” id=”nav3″
lia href=””首頁/a/li
lia href=””前端技術/a/li
lia href=””視覺設計/a/li
lia href=””文章歸檔/a/li
lia href=””工具/書籍/a/li
lia href=””關於我/a/li
/ul
h1向下（速度400毫秒）/h1
ul class=”nav” id=”nav4″
lia href=””首頁/a/li
lia href=””前端技術/a/li
lia href=””視覺設計/a/li
lia href=””文章歸檔/a/li
lia href=””工具/書籍/a/li
lia href=””關於我/a/li
/ul
/body
/html
原創文章，作者：HOJW，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/139240.html
微信掃一掃 
支付寶掃一掃 