> 웹 프론트엔드 > JS 튜토리얼 > JS 랜덤 플로팅 광고 code_javascript 기술의 구체적인 예

JS 랜덤 플로팅 광고 code_javascript 기술의 구체적인 예

WBOY
풀어 주다: 2016-05-16 17:14:19
원래의
1734명이 탐색했습니다.

코드 복사 코드는 다음과 같습니다.

<--랜덤 플로팅 광고 시작 --> ;


< script type="text/javascript">

var xPos=0,yPos=0;//x, y축 좌표
var xon = 0;//그림이 x축 방향으로 이동합니다
var yon=0;//그림이 y축 방향으로 이동합니다
var step=1 //이동 거리
var img =document.getElementByIdx_x("float ");//그림 레이어

function floatP()
{

var width=document.body.clientWidth;//브라우저 너비
var height=document.body .clientHeight;//브라우저 높이
var Hoffset=img.offsetHeight;//이미지 높이
var Woffset=img.offsetWidth;//이미지 너비

img.style .left=xPos document .body.scrollLeft;//이미지와 브라우저 왼쪽 사이의 거리
img.style.top=yPos document.body.scrollTop;//이미지와 상단 사이의 거리 브라우저

if(yon==0 ){
yPos=yPos step;//그림이 y축 방향으로 위아래로 움직입니다
}else{
yPos= yPos-step;
}
if(yPos<0){// 위로 떠서 y축을 따라 아래로 이동
yon=0;
yPos=0;
}
if(yPos>=(height-Hoffset)){//최하위까지 부동, y축을 따라 위쪽으로 이동
yon=1;
yPos=(height-Hoffset);
}

if(xon==0){//x축이 오른쪽으로 이동
xPos=xPos step;
}else{
xPos=xPos-step;//x -축 왼쪽으로 이동
}

if(xPos<0){//Float to 왼쪽으로 이동할 때 x축을 따라 오른쪽으로 이동
xon=0;
왼쪽으로 이동 x축을 따라
xon=1;
xPos=(width-Woffset);
}

setTimeout("floatP()",30); // 타이밍 호출.

}
window.onload=floatP();







코드 복사 코드는 다음과 같습니다.

최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿