효과: 사물: 다기능 플로팅 모션 프레임을 사용하여 웨이보 효과를 구현합니다. 먼저 새로 생성된 li에 텍스트 영역의 속성을 추가한 다음 ul에 li를 추가한 다음 플로팅 모션 프레임을 사용하여 동적으로 표시합니다. 데이터. 코드: 코드 복사 코드는 다음과 같습니다. <제목> <br> *<br> {<br> 여백: 0;<br> 패딩: 0;<br> }<br> #ul1<br> {<br> 너비:<br> 높이: 300px;<br> 테두리: 1px 검정색 ;<br> 여백: 10px 자동;<br> 오버플로: 숨김;<br> #ul1 li<br> {<br> 목록 스타일: 없음;<br> 패딩: 4px;<br> 테두리 -하단: 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 = document.getElementById( 'ul1');<br> btn.onclick = function () {<br> var cLi = document.createElement('li');<br> cLi.innerHTML = txt.value; //将数据添加到li里face<br> txt.value = '';<br> if (oUl.children.length > 0) { //判断是否已经有li，如果有那么就插入，如果没有那么就新建<br> oUl.insertBefore(cLi, oUl.children[0]);<br> } else {<br> oUl.appendChild(cLi);<br> }<br> var iHeight = cLi.offsetHeight; //고도 높이<br> cLi.style.height = '0';<br> move(cLi, { height: iHeight }, function () { //然后利용 浮动运动将数数据显示 Out来<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{width:200,height: 200}<br> 함수 이동(obj, json, fnName) { ~ | (json [attr] - oGetStyle) / 5; // 속도 구하기 <br> speed = speed > Math.ceil(speed) : Math.floor(speed) // 반올림 <br> if (oGetStyle != json[attr])<br> timeStop = false;<br> if (attr == 'opacity') { //투명도<br> obj.style.filter = 'al pha(opacity:' (oGetStyle 속도) ')' ; //투명도에 값 할당<br> obj.style[attr] = oGetStyle 속도 'px'; div<br> <br>タイマー後に実行される機能 }<br> //--------------- ---------------- ---------------------------------- ---------------- --<br> <入力タイプ="button" id="btn" value="公開" /> li style="display: none;">
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
