이 기사에서는 JS가 구현 한 간단한 이미지 부동 효과에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
창 객체를 사용하여 이미지의 부동 효과를 달성합니다.
1. 우리가 제어하고자하는 광고 div가 있습니다. 시작점 (0,0)
2. 수평 및 수직 속도를 설정하십시오
3. Control ad ad div mobile
1) 광고 div가 경계에 도달하는지 여부
2) 우리가 경계에 도달하면, 우리는 속도를 반대로 움직일 수 있도록 설정했습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> 제목이 붙은 문서 </title> <style> div {position : emg {emg {positive; 필터 : Alpha (incacity = 100);/* 즉*/-moz -opacity : 1;/* moz + ff*/불투명 : 1;/* CSS3 (ff 1.5도 지원)*/} </head> </head> <body id = "divimg"> type = "text/javaScript"> // 그림이 var img = document.getElementById ( "diMimg") 인 div 객체를 가져옵니다. // DIV의 왼쪽 상단 모서리의 좌표를 설정, 출발점의 좌표 var x = 10, y = 10; // 그림의 이동 속도를 설정 var xspeed = 2, yspeed = 1; // 그림의 최대 부동 높이와 너비를 설정합니다 var w = documentElement.clientWidth-1110, h = document.documentElement.clientHeight-160; 함수 floatimg () {// 그림 디스크가 경계에 도달하는지 여부를 비교하십시오 // 경계에 도달하면 (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // 경계에 도달하지 않으면 그림의 왼쪽 상단 모서리의 좌표를 설정하십시오. // 좌표 값 시작 좌표 + 속도 x + = xspeed; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // 함수를 호출하고 floatimg ()을 호출하고 settimeout을 호출합니다 ( "floatimg ()", 40); } floatimg (); </script> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.