jquery(2)

360音乐导航条


Paste_Image.png

思路


1.首先,创建一个ul,里面含有9个li,将所有的li左浮动,加上下左右的border,注意最右边的一个是#nav li:last-child搞定
2.其次,添加点击效果,用到jQuery的click函数,在点击时,先去除所有的含有点击样式的,然后再将该点击样式赋值给当前li
3.再次,利用jQuery的append方法,为每个li添加色块span,先将其block化,并赋予不同的颜色加以区分
4.再再次,利用jQuery的hover方法,为li添加hover移入和移开的动画animate效果,移入:色块上移,移开:色块恢复
5.最后,为导航栏添加音乐特效,先加入audio资源,最后在hover方法中,根据当前liindex,选择播放每个audio即可。




    Bootstrap
    
    
    
    
    
    

    
    



  
    
    
    
    
    
    
    
    
    
    
  





你可能感兴趣的:(jquery(2))