右侧波浪式导航

Html

Css

Js

    


1html5
        

2css3
        

3jquery
        

4javascript
        

5php
        

6jsp
        

7python
        

8ruby
        

9net
        

10c#
        

11c++
        

12java
    

* { margin:0; padding:0; } ul,li { list-style:none; } body { background:rgba(0,0,0,.8); } #rightfixed { width:140px; position:fixed; right:0; top:120px; } #rightfixed li { background:rgba(255,255,255,.5); color:#fff; } #rightfixed ul li { height:40px; line-height:40px; position:relative; left:100px; } #rightfixed ul li span { display:inline-block; width:40px; height:40px; background:lightskyblue; color:#fff; text-align:center; line-height:40px; margin-right:10px; }

var oFix = document.getElementById('rightfixed'); var oUl = oFix.getElementsByTagName('ul')[0]; var oLi = oUl.getElementsByTagName('li'); oFix.onmouseover = function() { for (var i = 0; i < oLi.length; i++) { oLi[i].style.transition = "1s " + i * 0.1 + "s"; oLi[i].style.left = '0px'; } } oFix.onmouseout = function() { for (var i = 0; i < oLi.length; i++) { oLi[i].style.transition = "1s " + i * 0.1 + "s"; oLi[i].style.left = '100px'; } }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

获取

var oFix=document.getElementById('rightfixed');
var oUl=oFix.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');

划出

oFix.onmouseover = function() {
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].style.transition = "1s " + i * 0.1 + "s";
        oLi[i].style.left = '0px';
    }
}

划入

oFix.onmouseout = function() {
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].style.transition = "1s " + i * 0.1 + "s";
        oLi[i].style.left = '100px';
    }
}