js-帶運動效果的留言板
阿新 • • 發佈:2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #ul1{ position: absolute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid black; margin:0; padding: 10px; overflow: hidden; } li{ line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden; }</style> <script src="move.js"></script> <script> window.onload=function(){ var oContent=document.getElementById("content"); var oBtn=document.getElementById("btn"); var oUl=document.getElementById("ul1"); oBtn.onclick=function(){ var oLi=document.createElement("li"); oLi.innerHTML=oContent.value; if(oUl.children[0]){ oUl.insertBefore(oLi,oUl.children[0]); }else{ oUl.appendChild(oLi) } var iHeight=parseInt(css(oLi,"height")); oLi.style.height="0px"; oLi.style.opacity="0"; oLi.style.filter="alpha(opacity=0)"; startMove(oLi,{ height:iHeight, opacity:100 }) } } </script> </head> <body> <textarea id="content" rows="10" cols="50"></textarea> <input type="button" value="留言" id="btn" /> <ul id="ul1"> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> </ul> </body> </html>
function startMove(obj, json, fn) { clearInterval(obj.iTimer); var iCur = 0; var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; for(var attr in json) { var iTarget = json[attr]; if(attr == "opacity") { iCur = Math.round(css(obj, "opacity") * 100); } else { iCur = parseInt(css(obj, attr)); } iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur != iTarget) { iBtn = false; if(attr == "opacity") { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } } if(iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); } function css(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }