PROMULGATOR
Yikeshu
北京市通- Html
- Css
- Js
* {
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;
}
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
立即下载
右侧波浪式导航
代码描述：js右侧波浪式导航
获取
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';
}
}1
