인터넷정보

그림이 아래로 떨어지게 하는 효과1

알 수 없는 사용자 2007. 10. 17. 12:50
<body>와 </body>사이에
스크립트를 넣으세요.

<SCRIPT language="JavaScript1.2">
<!-- Begin
var no = 10 ; // snow number
var speed = 18 ; // smaller number moves the snow faster
var snowflake = "http://oxtag.com/html/img/drip_pink.gif";

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 1024, doc_height = 700;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {  
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ns4up) {                      // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
   }
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
      }
   }
}
function snowNS() {  // Netscape main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {  // IE main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-10) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</SCRIPT>


수정할 부분은 자바 스크립트 상단에 있는

var no => 화면에 떨어지는 그림의 갯수
var speed =>떨어지는 속도
그리고 중요한거
var snowflake = "http://oxtag.com/html/img/drip_pink.gif"
이 부분입니다. 그림은 알아서 만들던지...좋아하는 그림을 넣으세요.

이렇게 하면 화면에 막 그림들이 떨어진답니다.
유용하게 쓰세요.
태그 연습장에 복사해서 써보세요.
반응형

'인터넷정보' 카테고리의 다른 글

크로스마우스 만들기  (0) 2007.10.17
크로스마우스 만들기  (0) 2007.10.17
그림이 아래로 떨어지게 하는 효과2  (0) 2007.10.17
그림이 아래로 떨어지게 하는 효과2  (0) 2007.10.17
그림이 아래로 떨어지게 하는 효과1  (0) 2007.10.17
이미지 랜덤 모드  (0) 2007.10.17
이미지 랜덤 모드  (0) 2007.10.17
브라우저 크기 조절 안되게 하고 자동 풀 스크린으로 열기  (0) 2007.10.17
브라우저 크기 조절 안되게 하고 자동 풀 스크린으로 열기  (0) 2007.10.17
하단 상태바 애니메이션 효과  (0) 2007.10.17

'인터넷정보'의 다른글

  • 현재글그림이 아래로 떨어지게 하는 효과1

관련글

댓글

티스토리툴바