>웹 프론트엔드 >JS 튜토리얼 >js float Pictures_javascript 기술의 동적 효과

js float Pictures_javascript 기술의 동적 효과

WBOY
WBOY원래의
2016-05-16 17:29:111316검색
코드 복사 코드는 다음과 같습니다.





플로팅 이미지



style="위치: 절대; 왼쪽: 500px; 위쪽: 400px; 테두리 : 단색 1px 검정색; " />



다른 구현 방법
코드 복사 코드는 다음과 같습니다.




< ;title>浮动广告实例



     style="Z-INDEX: 100;
     왼쪽: 12px;
     너비: 159px;
     위치: 절대;
     위쪽: 143px;
     높이: 161px;
 가시성: visible;">
 
 
 
 

 

< ;SCRIPT>
var xPos = 0;
var yPos = 0;
var step = 3;
var 지연 = 100;
var height = 0;
var Hoffset = 0 ;
var Woffset = 0;
var yon = 0;
var xon = 0;
var 일시 중지 = true;
var 간격;
img1.style.top = yPos;
함수changePos()
{
    width = document.body.clientWidth; //获取浏览器적 크기
    height = document.body.clientHeight; //높은 높이
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos document.body.scrollLeft;
img1.style.top = yPos document.body.scrollTop;
if (yon)
{yPos = yPos step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (높이 - Hoffset))
{yon = 0;yPos = (높이 - Hoffset);}
if (xon )
{xPos = xPos 단계;}
else
{xPos = xPos - 단계;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (너비 - Woffset))
{xon = 0;xPos = (너비 - Woffset);   }
}
함수 start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', Delay);
//interval = setTimeout("changePos()", 지연);
}
function Pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();




JS实现气泡从中急速上升效果
复主代码 代码如下:



JS实现气泡从水中急速上升效果







浮动广告
复主代码 代码如下: