이 스크립트는 자유게시판에 '떨거지'님께서 소개 해 주셨습니다
스크립트 창고의 StarLight Effect 와 비슷한 효과를 보실 수 있습니다
[이미지파일]
http://www.javascript.co.kr/java_data/bull.gif
[사용법]
<!--아래의 스크립트를 <body></body> 사이에 복사하여 넣으세요
bull.gif 이미지도 같은 디렉토리에 업로드 하세요. (경로가 다를경우에는 소스에서도 경로를 수정해주시면 됩니다
사용하실 이미지의 이름은 bull.gif 입니다. 물론 다른 이름으로 하셔도 되겠죠. 다만 다른 이름으로 하실때는 스크립트 소스에서도 bull.gif 대신 새로운 이름으로 작성하셔야 합니다.-->
<p><div id="dot0" style="position:absolute; left:50px; top:50px; width:33px; height:33px; z-index:1; visibility:hidden; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <div id="dot1" style="position:absolute; left:50px; top:50px; width:33px; height:38px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0">
</p>
</div> <div id="dot2" style="position:absolute; left:50px; top:50px; width:33px; height:33px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <div id="dot3" style="position:absolute; left:50px; top:50px; width:33px; height:35px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <div id="dot4" style="position:absolute; left:50px; top:50px; width:33px; height:35px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <div id="dot5" style="position:absolute; left:50px; top:50px; width:33px; height:35px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <div id="dot6" style="position:absolute; left:50px; top:50px; width:33px; height:33px; z-index:1; border-width:1px; border-style:none;">
<p><img src="bull.gif" width="22" height="22" border="0"> </p>
</div> <script language="JavaScript">
<!-- hide code
/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets)
Script featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
// Thanks to Troels Jakobsen <tjak@get2net.dk>
// for fix which makes it work when the page is scrolled
var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;
// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
// I only know how to read the locations of the
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}
// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 2000);
}
}
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}
function startanimate() {
setInterval("animate()", 20);
}
// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/ MASS,
(spring.Y + resist.Y)/ MASS + GRAVITY);
// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
// bounce of 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
// move img to new position
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
}
// end code hiding -->
</script>