js float Pictures_javascript 기술의 동적 효과-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다. 플로팅 이미지 var step = 1; // 픽셀 이동 var y = -1; // 수직 이동 방향, -1은 위쪽, 1은 아래쪽을 의미합니다. var x = 1; 방향, -1은 왼쪽, 1은 오른쪽을 의미 function myFloat() { var img = document.getElementById("myImg"); // 이미지 및 현재 브라우저 가져오기 창 상단 여백 , img.style.top에서 얻은 값은 px 단위를 갖기 때문입니다 var top = img.style.top.replace("px", ""); // top = top - 100; // img.style.top = top "px"; // 현재 브라우저 창의 이미지와 왼쪽 여백을 가져옵니다 var left = img.style.left.replace("px", "" ) ; // 왼쪽 = 왼쪽 - 100; // img.style.left = 왼쪽 "px"; // 위아래로 이동 if(top { y = 1; } if(top >= document.body.clientHeight) { y = -1; } top = (top* 1) (step * y); img.style.top = top "px"; // 왼쪽 및 오른쪽으로 이동 if(left { x = 1 ; } // 경고(img.clientWidth); if(왼쪽 >= (document.body.clientWidth - img.clientWidth)) { x = -1; } left = (왼쪽*1) (단계 * x); img.style.left = 왼쪽 "px"; setTimeout("myFloat()", 20); } style="위치: 절대; 왼쪽: 500px; 위쪽: 400px; 테두리 : 단색 1px 검정색; " /> 다른 구현 방법 코드 복사 코드는 다음과 같습니다. &lt ;title>浮动广告实例 var pos = 10; function toueme() { document.getElementById(" toubiao").style.display = "none"; } function initArray() { this.length = initArray.arguments.length; for (var i = 0; i this[i] = initArray.arguments[i]; } } var col = new initArray("4b", "5b", "8b" , "8b"); col[0] = "노란색"; col[1] = "산호"; col[2] = "주황색"; col[3] = "빨간색"; col[4] = "녹색노란색"; col[5] = "라임"; col[6] = "청록색"; col[7] = "산호 "; col[8] = "blueviolet"; col[9] = "violet"; function chgCol() { pos ; if (pos 9) { pos = 0; } document.bgColor = col[pos]; setTimeout("chgCol()", 500); } style="Z-INDEX: 100; 왼쪽: 12px; 너비: 159px; 위치: 절대; 위쪽: 143px; 높이: 161px; 가시성: visible;"> src="close.gif " 너비=84 높이=11 hspace="6" border=0> &lt ;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 {yon = 1;yPos = 0;} if (yPos >= (높이 - Hoffset)) {yon = 0;yPos = (높이 - Hoffset);} if (xon ) {xPos = xPos 단계;} else {xPos = xPos - 단계;} if (xPos {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实现气泡从水中急速上升效果 본체 {커서:십자선;여백:0; 패딩:0; 위치:절대; 오버플로:숨김; 배경:#FFF; 왼쪽:0; 상단:0; 너비:100%; height:100%;} var object = new Array(); nbfm = 60; var xm = 0; var ym = 9999; var nx = 0; var ny = 0; function movbulb(){ with (this) { if( ec if(Math.abs(x0 - xm) xx = (xm - x0) / 8; yy = (ym - y0) / 8; ec ; } } xx *= 0.99; yy *= 0.99; x0 = Math.round( x0 Math.cos(y0 / 15) * p) xx; y0 = yy - v; if(y0 nx w * 2){ y0 = ny N h * 2; x0 = nx/2-100 Math.random() * 100; ec = 0; } obj. style.top = y0 - h; obj.style.left = x0 - w; } } 함수 CObj(N,img,w,h){ this.obj = document.createElement("img"); this.obj.src = img.src; this.obj.style.position = "absolute"; this.obj.style.left = - 1000; document.body.appendChild(this.obj); this.N = N; this.x0 = 0; this.y0 = -1000; this.v = 1 Math.round((80 / h) * Math.random()); this.p = 1 Math.round((w / 8) * Math.random()); this.xx = 0; this.yy = 0; this.ec = 0; this.w = w; this.h = h; this.movbulb = movbulb; } 함수 크기 조정(){ nx = document.body.offsetWidth; ny = document.body.offsetHeight; } onresize = resize; document.onmousemove = function(e){ if (window.event) e = window.event; xm = document.body.scrollLeft (예: x || e.clientX); ym = document.body.scrollTop (e.y || e.clientY); } function run(){ for(i in object)object[i]. movbulb(); setTimeout(run, 16); } onload = function() { PIC = document.getElementById("bubbles").getElementsByTagName("img"); resize(); for(nbf=0;nbf sf = PIC[nbf%PIC.length]; object[nbf] = new CObj(nbf,sf, sf.width/2,sf.height/2); } run(); } 浮动广告 复主代码 代码如下: 浮动广告 var x = 400,y = 300 var xin = true , yin = true var step = 1 var Delay = 25 var obj=document.getElementById("ad") function floatAD() { var L=T =0 var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x document.body.scrollLeft obj.style.top = y document.body.scrollTop x = x 단계*(xin?1:-1) if (x if (x > R){ xin = false; x = R} y = y 단계*(yin?1:-1) if (y if (y > B) { yin = false; y = B } } var itl= setInterval("floatAD()", Delay) function closeWindow() { window.close(); } 입력{ background-image:url(638.jpg); 테두리:0px; 여백:0px; 패딩:0px; 높이:23px; 너비:82px; 글꼴 크기:14px; } &lt ;/body>