- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- jQuery實(shí)現帶展開(kāi)動(dòng)畫(huà)的導航欄效果
設計和自定義一個(gè)帶展開(kāi)動(dòng)畫(huà)效果的導航欄，嘗試寫(xiě)了一個(gè)demo，加上設計和調試差不多寫(xiě)了一天吧。
這里就來(lái)講講如何從設計->寫(xiě)布局->寫(xiě)樣式->寫(xiě)JS代碼 完成一個(gè)完全自己設計的導航欄。
HTML寫(xiě)布局，CSS寫(xiě)樣式，JS寫(xiě)動(dòng)畫(huà)效果和事件響應等，考慮到JQuery對DOM操作的便利性，這里選擇用JQuery可以達到事半功倍的效果。
如果覺(jué)得自己下載的一些導航欄插件太千篇一律了，那么就設計一個(gè)自己喜歡的導航欄?？梢韵饶脧埣埉?huà)畫(huà)自己希望要一個(gè)什么樣的導航最終想要達到什么樣的效果。
比如這里想要寫(xiě)一個(gè)導航欄，鼠標懸浮在每一章節上面，可以橫向伸展出下面的每一個(gè)節點(diǎn)，節點(diǎn)的出現有一個(gè)跳躍的動(dòng)作。
在理清楚思路以后，開(kāi)始寫(xiě)HTML，這步相對比較簡(jiǎn)單。 一般用到<div> <span> <a> 這幾個(gè)標簽就可以了。寫(xiě)清楚層次關(guān)系是很重要的，這里
要說(shuō)明幾點(diǎn)：
<div> 是一個(gè)塊級元素。這意味著(zhù)它的內容自動(dòng)地開(kāi)始一個(gè)新行。
<span>標簽不會(huì )獨自占一行，一般用來(lái)包裹內容。因為不是塊級元素設置width、height屬性無(wú)效
<a>標簽當然是用來(lái)放鏈接的啦
樣式需要慢慢的調試，要用耐心。配色可以參考一些經(jīng)典的配色方案。因為我們想要實(shí)現橫向伸展出下面的每一個(gè)節點(diǎn)，必定會(huì )需要類(lèi)似于多欄布局那樣的效果，<span> 和<div>標簽設置樣式 display:inline-block可以將對象呈遞為內聯(lián)對象，但是對象的內容作為塊對象呈遞。簡(jiǎn)單的說(shuō)就是既一個(gè)設置width、height又不會(huì )強制占據一行。也可以用 display:flex這個(gè)牛逼的CSS3布局屬性，實(shí)現多欄多列布局。
布局寫(xiě)好之后就需要實(shí)現功能了。前面提到導航欄實(shí)現鼠標懸浮在每一章節上面，可以橫向伸展出下面的每一個(gè)節點(diǎn)。自然會(huì )用到hover事件，來(lái)看看jQuery的hover事件。
$(selector).hover(inFunction,outFunction)
括號內第一個(gè)function必需寫(xiě)，規定 mouseover 事件發(fā)生時(shí)運行的函數。
第二個(gè)function可選，規定 mouseout 事件發(fā)生時(shí)運行的函數。
jQuery同樣可以方便的實(shí)現動(dòng)畫(huà)效果， animate() 方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng )建動(dòng)畫(huà)效果，這里不再贅述。
因為想要節點(diǎn)按順序依次出現，但又不想用animate的排隊，所以我寫(xiě)了一個(gè) 回調函數，在回調函數中寫(xiě)了setTimeout延時(shí)，用addClass給響應的節點(diǎn)加上animation動(dòng)畫(huà)樣式。
代碼：
<!--Created by CC on 2017/10/14-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>~myNav~</title>
<script type="text/javascript" src="jquery.js"></script>
<!--樣式-->
<style type="text/css">
.triangle-right {
width: 0;
height: 0;
border-left: 20px solid #FF7800;
border-bottom: 20px solid transparent;
border-top:2px dotted #333333;
display: inline-block;
margin-top:10px;
vertical-align: top;
}
.mynav
{
font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
-webkit-font-smoothing: subpixel-antialiased;
margin:10px 2%;
width:90%;
heigth:450px;
display:flex;
}
.nav-left{
flex:auto;
heigth:200px;
font-size:20px;
font-weight: 700;
text-align: center;
background-color:#505050 ;
color:#FF7800;
border-right:3px solid #FF7800;
width:80px;
padding-top:40px;
}
.nav-right{
flex:auto;
width:90%
}
.nav-right div{
position:relative;
}
.cap{
display:inline-block;
width:70px;
height:30px;
background-color: #FF7800;
margin:10px 0;
border-bottom:2px dotted #333333;
border-top:2px dotted #333333;
}
.child{
display:inline-block;
width:0px;
border-top:2px dotted #333333;
vertical-align: top;
margin-top: 10px;
}
span.cap-child
{
position:absolute;
border:2px solid #333333;
background-color: #505050;
color: #ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*top:5px;*/
left:0px;
}
span.cap-child a{
font-size:15px;
color:white;
}
span.cap-child a:hover{
color: #ffc8aa;
}
.hr-over{
position:absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #FF7800;
width:20px;
height:20px;
margin-top:-10px;
border:1px solid #333333;
}
.showit{
animation: cho-show .5s;
}
@keyframes cho-show {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity:0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity:1;
}
}
</style>
</head>
<body>
<!--布局-->
<div class="mynav">
<div class="nav-left">
目<br/>錄<br>
<span style="font-size:6px">
by cc
</span>
</div>
<div class="nav-right" >
<div >
<span class="cap ">Chapter1</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">Chapter2</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">Chapter3</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var active='';
var space=80;
var myNodes =[{ name:'Chapter1',
children: [{name:'字符集',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
{name:'注釋',url:'cc/sd1/index'},
{name:'直接量',url:'cc/sd2/index'}
]},
{name:'Chapter2',
children:[{name:'數字',url:'#'},
{name:'文本',url:'#'},
{name:'布爾值',url:'#'},
{name:'全局對象',url:'#'},
{name:'包裝對象',url:'#'}
]},
{
name:'Chapter3',
children: [{name:'貓貓',url:'#'},
{name:'狗狗',url:'#'}
]}
];
$('.cap').hover(function(){
var cap=this;
var mybox=$(cap.parentNode).find('.child');
if(active!=this.innerHTML)
{
//變色
$(cap).css('background-color','#ffc8aa');
$(cap).next().css('border-left-color','#ffc8aa');
//清理原來(lái)的內容
for(var j=0;j<$('.child').length;j++)
{
//console.log($('.child')[j]);
$($('.child')[j]).empty();
$($('.child')[j]).css('width','0px');
}
active=this.innerHTML;
myNodes.forEach(function(item){
if(active==item.name)
{
myAnimate(item.children,mybox);
}
}
);
}
//順序顯示
orderShow($(mybox),$(mybox).children().length-1);
}, function(){
//變色
$(this).css('background-color','#FF7800');
$(this).next().css('border-left-color','#FF7800');
});
function myAnimate(arr,ele)
{
// console.log(ele);
var $ele=$(ele);
var pos;
arr.forEach(function(item,index){
pos=space*index+20;
addOne(item,pos+'px');
});
$ele.animate({width:pos+100+'px'},200,'linear',function(){
var left=pos+80+'px';
$ele.append("<span class='hr-over' style='left:"+left+"'></span>");
});
function addOne(item,pos)
{
var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
$ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
}
}
function orderShow($it,times)
{
if(times>=0)
{
setTimeout(function(){
$($it.children()[times]).css('display','block')
$($it.children()[times]).addClass('showit');
orderShow($it,times-1)
},100);
}
else
return;
}
</script>
</body>
</html>
效果：
動(dòng)態(tài)效果：
以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
