直接上代码
* { margin: 0; padding: 0; } #uli { width:250px; height:auto; float:left; border-top: 1px solid #000; margin:20px; } li { list-style: none; width: 100%; height: 30px; line-height:30px; overflow:hidden; position:relative; border-bottom:1px solid #333; } li div { position:absolute; top:-30px; } li div p { height: 30px; letter-spacing:5px; }
<ul id="uli"> <li> <div> <p>111</p> <p>222</p> <p>aaa</p> <p>bbb</p> </div> </li> <li> <div> <p>333</p> <p>444</p> </div> </li> <li> <div> <p>555</p> <p>666</p> </div> </li> <li> <div> <p>777</p> <p>888</p> </div> </li> </ul>
function startMove(obj,json,endFn){ clearInterval(obj.timer) obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; if(attr == "opacity"){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; } }else{ iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr]-iCur)/8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur!=json[attr]) { bBtn = false; } if(attr =='opacity'){ obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+')'; obj.style.opacity = (iCur + iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + "px"; } } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn,call(obj); } } },30); } function getStyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } window.onload = function(){ var uli = document.getElementById('uli'); toShow(uli); function toShow(obj){ var adiv = document.getElementsByTagName('div'); var inow = 0; var time = null; var btn = true; setInterval(function(){ toChange(); },1000); function toChange(){ timer = setInterval(function(){ if(inow == adiv.length){ clearInterval(timer); inow = 0; btn=!btn; }else if(btn){ startMove(adiv[inow],{top:0}); inow++; }else{ startMove(adiv[inow],{top:-30}); inow++; } },100); } } }