効果: もの: 多機能フローティング モーション フレームを使用して Weibo 効果を実現するには、まずテキストエリアの属性を新しく作成した li に追加し、次に li を ul に追加してから、フローティング モーション フレームを使用して動的に表示します。データ。 コード: コードをコピー コードは次のとおりです: <br> *<br> {<br> マージン: 0;<br> パディング: 0;<br> }<br> #ul1<br> {<br> 幅: 300px;<br>高さ: 300px;<br> 境界線: 1 ピクセル黒一色;<br> margin: 10px auto;<br> overflow: hidden;<br> }<br> #ul1 li<br> {<br> list-style: none;<br> パディング: 4px;<br> 境界線-bottom: 1px #999 破線;<br> オーバーフロー: 非表示;<br> 不透明度: 0;<br> }<br> <BR> window.onload = function () {<BR> var btn = document.getElementById('btn');<BR> var txt = document.getElementById('t1');<BR> var oUl = ドキュメント。 getElementById( 'ul1');<BR> btn.onclick = function () {<BR> var cLi = document.createElement('li');<BR> cLi.innerHTML = txt.value; // li里面にデータを追加<BR> txt.value = '';<BR> if (oUl.children.length > 0) { // すでに有るかどうか判断する、如果有那么就插入、如果没有那么就新建<BR> oUl.insertBefore(cLi, oUl.children[0]);<BR> } else {<BR> oUl.appendChild(cLi);<BR> }<BR> var iHeight = cLi.offsetHeight; //获得li的高さ<BR> cLi.style.height = '0';<BR> move(cLi, { height: iHeight }, function () { //その後浮動运动将データ表示成果<BR>移動(cLi, { 不透明度: 100 });<BR> });<BR> }<BR> }<BR> //---------- -------------------------------------------------- -------------<BR> //获取非行间样式<BR> function getStyle(ojb, name) {<BR> if (ojb.currentStyle) {<BR> return ojb.currentStyle [名前];<BR> }<BR> Else {<BR> Return getComputestyle (OJB, FALSE) [name]; <BR>} <BR>} <BR> // クッショニング json での JSON のアプリケーション > //json{width:200,height: 200}<BR>関数移動(obj、json、fnname){ /; (json [attr] - oGetStyle) // 速度を求める <BR> 速度 = 速度 > 0 Math.ceil(speed) : Math.floor(speed); // 切り上げ <BR> if (oGetStyle) != json[attr])<BR> timeStop = false;<BR> if (attr == 'opacity') { //Transparency<BR> obj.style.filter = 'al pha(opacity:' (oGetStyle 速度) ')' ; //透明度に値を割り当てます<BR> obj.style[attr] = oGetStyle 速度 'px'; div<BR><BR> To be executed after timer The function of }<BR> //----------------- -------------------------------------------------- ------------------<BR> li style="display: none;">