나는 지난 며칠 동안 프로젝트를 수행했습니다. CSS3 애니메이션으로 만들어졌습니다. IE와 호환되지 않기 때문에 JS 사용으로 변경되었습니다. 나는 당신의 참조를 위해 당신과 공유 할 것입니다. 코드에 버그가 있으면 글을 잘 쓰지 않은 것에 대해 용서 해주세요!
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml : lang ="en "> <head> <head> <meta http-equiv ="content-type "content ="text/html; charset = utf-8 "/> <title> 왼쪽 왼쪽 및 상단> <스타일 type = "text/css">. w1000 {위치 : 상대; 너비; 너비 : 1000px; 마진 : 0 자동;}. positionpub {position;}. PositionPub p {너비 : 50px; 높이 : 50px; 배경 :#333; 컬러 : #ffff; line-height : 50px; 텍스트-정렬 : 중심; 위치 : 절대;}. ad_float {t op : 50px; 왼쪽 : 50px;}. ad_float1 {상단 : 150px; 왼쪽 : 250px;} id = "ad_float"> 왼쪽 </p> </div> <div> <p id = "ad_float1"> 오른쪽 </p> </div> <div> <p id = "ad_float2"> down </p> </div> </div> <script type = "text/javascript"> var x = 0, y = 0, x1 = 0; 2; var Delay = 10; var obj = document.getElementById ( "ad_float"); var obj1 = document.getElementById ( "ad_float1"); var obj2 = document.getElementById ( "ad_float2"); function ad_float () {var l = 0; var r = 100; obj.style.left = x + document. "px"; x = x + step * (xin? 1 : -1); if (x <l) {xin = true; x = l;} if (x> r) {xin = false; x = r;}}; function ad_float1 () {var l1 = 0; var r1 = 100; ovj1.left = x1 + Documentement.scrollementelement.scrollementelement.dcrollementelement. = x1 + step * (xin? 1 : -1); if (x1 <l1) {xin = true; x1 = l1;} if (x1> r1) {xin = false; x1 = r1;}}; function ad_float2 () {var t = 0; var b = 150; ovj22.top = pp = y + Document.dcocumement.dcrollement. y + step2 * (yin? 1 : -1); if (y <t) {yin = true; y = t;} if (y> b) {yin = false; y = b;}}; var itl = setInterval ( "ad_float ()", delain); var itl1 = setInterval ( "ad_float1 ()"; setInterval ( "ad_float2 ()", Delay); </script> </body> </html>코드는 여기서 끝납니다. 모든 사람에게 도움이되기를 바랍니다!