Tech & Tips

ลูกเล่น ต่าง ๆ !!


มีระเบิดวิ่งชน MOUSE


ให้ SAVE รูปภาพประกอบไปด้วย

นำ CODE ด้านล่างไปไว้ที่ <body> 

<script>
picFollow = new Image();
picFollow.src = "ตำแหน่งที่เก็บรูป bomb.gif";
picExplosion = new Image();
picExplosion.src = "ตำแหน่งที่เก็บรูป explode.gif";
document.onmousemove = getMousePosition;
document.onmouseout = pauseBomb;
document.write("<div id=\"diva\" style=\"position:absolute\">");
document.write("<img name=\"pic\"src=" + picFollow.src + "></div>");
var picX = 20;
var picY = 100;
var step = 10;
var speed = 100;
var tolerance = step/2 +1;
var mouseX = 0;
var mouseY = 0;
var mouseOut = true;
var followMouse = false;
myInterval = setInterval('moveBomb()', speed);
function pauseBomb() {
mouseOut = true;
}
function getMousePosition(e) {
mouseX = window.event.x + document.body.scrollLeft;
mouseY = window.event.y + document.body.scrollTop;
mouseOut = false;
if (followMouse) {
diva.style.left = mouseX - pic.width / 2;
diva.style.top = mouseY - pic.height / 2;
}
}
function calcNewPos() {
if (mouseX == picX)
return;
arg = (mouseY-picY) / (mouseX-picX);
mult = 1;
if (mouseX - picX < 0)
mult = -1;
alpha = Math.atan(arg);
dx = mult * step * Math.cos(alpha);
dy = mult * step * Math.sin(alpha);
picX += dx;
picY += dy;
}
function collision() {
if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))
return true;
return false;
}
function hideAnimation() {
diva.style.visibility = "hidden";
}
function moveBomb() {
calcNewPos();
window.status = "("+mouseX+","+mouseY+")";
diva.style.left = picX - pic.width / 2;
diva.style.top = picY - pic.height / 2;
if (collision()) {
clearInterval(myInterval);
pic.src = picExplosion.src;
followMouse = true;
setTimeout('hideAnimation()', 2000);
}
}
</script> 
  


คลิ๊กที่ RADIO BUTTON แล้วมี POPUP 


นำ CODE ด้านล่างไปไว้ในตำแหน่งที่ต้องการให้แสดง <body>

<FORM>
<p align="center">
<font face="MS Sans Serif" size="1">
1:
<INPUT TYPE="radio" NAME="radio" value="ข้อความที่ 1"
onClick="alert(value)">
2:
<INPUT TYPE="radio" NAME="radio" value="ข้อความที่ 2"
onClick="alert(value)">
3:
<INPUT TYPE="radio" NAME="radio" value="ข้อความที่ 3"
onClick="alert(value)">
</font>
</form>
 

มีฟองอากาศลอยขึ้นมา


ให้ SAVE รูปภาพประกอบไปด้วย
 

นำ CODE ด้านล่างไปไว้ที่ <body> 

<script language="JavaScript1.2">
<!-- Begin
var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "ตำแหน่งของรูป bubble.gif"
snow[1] = "ตำแหน่งของรูป bubble.gif"
snow[2] = "ตำแหน่งของรูป bubble.gif"
var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
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();
j = 0;
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\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
}        } else if (ie4up||ns6up) {                if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}
function snowNS() {  // Netscape main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] -= sty[i];                if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
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]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE_NS6() {  // IE main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
 xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
 setTimeout("snowIE_NS6()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>