이 기사에서는 이미지 부동 효과를 달성하기위한 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
설명 : 웹 페이지를 열면 지속적으로 떠 다니는 사진이 표시되면 클릭하여 다른 페이지에 연결하십시오. 핵심 효과가 있습니다!
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 테스트 </title>
<스타일 유형 = "텍스트/CSS">
#all {너비 : 100%; 높이 : 3000px;}
</스타일>
</head>
<body>
<div id = "all">
<div id = "img"style = "위치 : 절대; z-index : 99;">
<a href = "#"target = "_ blank"> <img src = "images/opvti.jpg"style = "커서 : 포인터;" 스타일 = "커서 : 포인터;" /> </a>
<script language = "javaScript">
<!-시작
var xpos = document.body.clientWidth -20;
var ypos = document.body.clientHeight / 2;
var 단계 = 1;
var 지연 = 10;
var 높이 = 0;
var 호프셋 = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var 간격;
img.style.top = ypos;
함수 changepos () {
너비 = document.body.clientWidth;
높이 = document.body.clientHeight;
호프셋 = img.offsetheight;
woffset = img.offsetwidth;
img.style.left = xpos + document.body.scrollleft;
img.style.top = ypos + document.body.scrolltop;
if (yon) {
ypos = ypos + 단계;
} 또 다른 {
ypos = ypos- 단계;
}
if (ypos <0) {
yon = 1;
ypos = 0;
}
if (ypos> = (높이 -hoffset)) {
yon = 0;
ypos = (높이 -hoffset);
}
if (xon) {
XPOS = XPOS + 단계;
} 또 다른 {
XPOS = XPOS- 단계;
}
if (xpos <0) {
xon = 1;
xpos = 0;
}
if (xpos> = (width -woffset)) {
xon = 0;
xpos = (너비 -Woffset);
}
}
함수 start () {
img.visibility = "Visible";
interval = setInterval ( 'changepos ()', 지연);
}
함수 pause_resume () {
if (pause) {
ClearInterval (간격);
일시 정지 = 거짓;
} 또 다른 {
interval = setInterval ( 'changepos ()', 지연);
일시 정지 = 참;
}
}
시작();
// 종료 ->
</스크립트>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.