* { 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'; } }