ทำ TEXT ให้เขย่าโดยไม่ต้องเอาเมาส์ไปชี้ต้องแก้ไขยังไง (Js)

Meen2007 · 11 สิงหาคม 2013, 20:03:40

เป็น Shake script ที่ทำให้ตัวหนังสือหรือภาพมันเขย่า สั่น เมื่อเอาเมาส์ไปชี้
แต่ต้องการจะแก้ไข TEXT ข้อความให้มันเขย่าเลย โดยไม่ต้องรอเอาเมาส์ไปชี้ ต้องแก้ไขยังไงครับ

แก้ไขโค้ดที่ใส่ผิดใหม่แล้ว

โค้ด เลือก

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shake script</title>
<style>
.shakeimage{
position:relative
}
</style>
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)- 
© Dynamic Drive ([url=http://www.dynamicdrive.com]www.dynamicdrive.com[/url])
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0 
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top) rector "px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left) rector "px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector "px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector "px"
}
if (a<4)
a  
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>
</head>

<body>
<p>
<img src="http://www.dynamicdrive.com/dynamicindex4/Image1.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">
<p>
<div class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>Shake TEXT Script1</div>
</p>
<div class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>Shake TEXT Script2</div>
</p>
<div class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>Shake TEXT Script3</div>
</p>
</body>
</html>

DEMO: http://www.dynamicdrive.com/dynamicindex4/shake.htm
(สคริปต์ตัวนี้ใส่ TEXT หรือรูปภาพได้ทีละหลายๆอันโดยยังทำงานพร้อมกันได้ตลอด)

ทำได้แล้วครับ

โค้ด เลือก

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Shake script</title>
<style type="text/css">
.box{background-color:red; margin:10px; height:70px; width:70px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	//var duration= 5000; // 5 วินาทีจะหยุดการเขย่า ตัดทิ้งถ้าไม่ต้องการกำหนด
	//var duration= 365*24*60*60*1000;   //1ปีจึงจะหยุด หน่วยเป็น milisec.
	var left_pos,top_pos;
	var shakingID = setInterval(function(){
		left_pos = Math.round(Math.random() * 3) 'px'; //3 กำหนดความเร็วเขย่า
		top_pos = Math.round(Math.random() * 3) 'px'; //3 กำหนดความเร็วเขย่า
		$(".box").css({position: 'relative', left: left_pos, top: top_pos});
	},50);
	setInterval(function(){
		clearInterval(shakingID);
		$(".box").css({position: 'static', left: '0px', top: '0px'});
	},duration);
});

</script>
</head>

<body>
<div class="box">Shake1</div>
<div class="box">Shake2</div>
<div class="box">Shake3</div>
<div class="box">Shake4</div>
</body>
</html>

ดัดแปลงโดย : LittleLovely (thaicreate.com)
Demo : http://jsfiddle.net/NxwMa/
*var duration= 5000; // 5 วินาทีจะหยุดการเขย่า ตัดทิ้งถ้าไม่ต้องการกำหนด*

max30012540 · 11 สิงหาคม 2013, 21:20:35

Javascript ครับ ไม่ใช่ Java (ใช้งานต่างกันมากครับ)
แล้วที่ผมดู มันเลื่อนลงไม่ใช่หรอ เขย่าตรงไหน

พีพีเค · 11 สิงหาคม 2013, 21:23:10

~~onMouseover~~
onLoad ?
http://www.w3schools.com/jsref/event_onload.asp

Meen2007 · 11 สิงหาคม 2013, 21:55:09

อ้างถึงจาก: พีพีเค ใน 11 สิงหาคม 2013, 21:23:10
~~onMouseover~~
onLoad ?
http://www.w3schools.com/jsref/event_onload.asp

ลองมาหมดแล้วครับเปลี่ยนแล้วนิ่ง

โค้ด เลือก

<div class=class="shaker"  onload="top.focus()" onload="init(this);rattleimage()" onload="stoprattle(this);top.focus()"/>Shake TEXT Script1</div>
</p>
<div class=class="shaker" onload="top.focus()" onload="init(this);rattleimage()" onload="stoprattle(this);top.focus()"/>Shake TEXT Script2</div>
</p>
<div class=class="shaker"  onload="top.focus()" onload="init(this);rattleimage()" onload="stoprattle(this);top.focus()"/>Shake TEXT Script3</div>

Meen2007 · 11 สิงหาคม 2013, 21:56:58

อ้างถึงจาก: max30012540 ใน 11 สิงหาคม 2013, 21:20:35
Javascript ครับ ไม่ใช่ Java (ใช้งานต่างกันมากครับ)
แล้วที่ผมดู มันเลื่อนลงไม่ใช่หรอ เขย่าตรงไหน

ผมผิดกะว่าย่อๆ แต่จริงๆก็ผิดไวยาอยู่ดี (js) ถึงจะถูก เด๋วแก่ครับ หัวค่ำว่าจะแก้อยู่
เขย่าครับดูที่มา DEMO
http://www.dynamicdrive.com/dynamicindex4/shake.htm

max30012540 · 11 สิงหาคม 2013, 23:14:23

อ้างถึงจาก: Meen2007 ใน 11 สิงหาคม 2013, 21:56:58
อ้างถึงจาก: max30012540 ใน 11 สิงหาคม 2013, 21:20:35
Javascript ครับ ไม่ใช่ Java (ใช้งานต่างกันมากครับ)
แล้วที่ผมดู มันเลื่อนลงไม่ใช่หรอ เขย่าตรงไหน

ผมผิดกะว่าย่อๆ แต่จริงๆก็ผิดไวยาอยู่ดี (js) ถึงจะถูก เด๋วแก่ครับ หัวค่ำว่าจะแก้อยู่
เขย่าครับดูที่มา DEMO
http://www.dynamicdrive.com/dynamicindex4/shake.htm

อ๋อ ใน Demo เขย่าครับ แต่ในส่วนโค้ดของ TSB ผมก๊อบมาลอง มันเลื่อนลงอย่างเดียว
สงสัยตัดเครื่อหมายออะไรออกละสิ โค้ดทำงานไม่สมบูรณ์เลย

max30012540 · 11 สิงหาคม 2013, 23:28:33

อ้างถึงจาก: max30012540 ใน 11 สิงหาคม 2013, 23:14:23
อ้างถึงจาก: Meen2007 ใน 11 สิงหาคม 2013, 21:56:58
อ้างถึงจาก: max30012540 ใน 11 สิงหาคม 2013, 21:20:35
Javascript ครับ ไม่ใช่ Java (ใช้งานต่างกันมากครับ)
แล้วที่ผมดู มันเลื่อนลงไม่ใช่หรอ เขย่าตรงไหน

ผมผิดกะว่าย่อๆ แต่จริงๆก็ผิดไวยาอยู่ดี (js) ถึงจะถูก เด๋วแก่ครับ หัวค่ำว่าจะแก้อยู่
เขย่าครับดูที่มา DEMO
http://www.dynamicdrive.com/dynamicindex4/shake.htm
อ๋อ ใน Demo เขย่าครับ แต่ในส่วนโค้ดของ TSB ผมก๊อบมาลอง มันเลื่อนลงอย่างเดียว
สงสัยตัดเครื่อหมายออะไรออกละสิ โค้ดทำงานไม่สมบูรณ์เลย

ก๊อบส่วนอื่นๆมาจาก Demo นะครับ
แล้วแก้อิลิเมต body เป็นประมาณนี้ครับ

โค้ด เลือก

<body onload="init(document.getElementById('text'));rattleimage()">
คือใน Demo เขาใช้ this ในการอ้างอิงอิลิเมต พอเอามาใช้กับรอโหลดอิลิเมตอื่น เราต้องกำหนดลักษณะ เช่น id name หรือ class ให้แตกต่าง
แล้วจึงอ้างอิงอีกที ในโค้ดด้านบน ผมอ้างอิงอิลิเมตที่มี id=text ฉนั้นโค้ดส่วนนั้น จะได้ว่า

โค้ด เลือก

<body onload="init(document.getElementById('text'));rattleimage()">
<p>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script1</div>
</p>
</body>

ลองดูครับ

Meen2007 · 11 สิงหาคม 2013, 23:41:34

ปัญหาคือมันใช้ได้แค่ ข้อความเดียวครับ คือมัน Shake แค่ TEXT แรกอันเดียวครับ ต้องการหลายๆอันครับ ขอบคุณนะครับที่ช่วยทำให้

<body onload="init(document.getElementById('text'));rattleimage()">
<p>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script4</div>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script5</div>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script6</div>
</p>
</body>

jeen705 · 11 สิงหาคม 2013, 23:44:40

ติดตามครับจะนำไปใช้บาง
ขอบคุณครับ

takumiz · 11 สิงหาคม 2013, 23:54:00

อ้างถึงจาก: Meen2007 ใน 11 สิงหาคม 2013, 23:41:34
ปัญหาคือมันใช้ได้แค่ ข้อความเดียวครับ คือมัน Shake แค่ TEXT แรกอันเดียวครับ ต้องการหลายๆอันครับ ขอบคุณนะครับที่ช่วยทำให้

<body onload="init(document.getElementById('text'));rattleimage()">
<p>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script4</div>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script5</div>
<div class="shakeimage" id="text" onClick="top.focus()">Shake TEXT Script6</div>
</p>
</body>

ลองใส่เป็น Class แทนจะได้ป่าวครับ

id มันเป็นตัวเดียว จะซ้ำกันไม่ได้ element ใหน element นั้น ซ้ำกันผิดครับ
class เป็นกลุ่มได้ครับ

Meen2007 · 12 สิงหาคม 2013, 00:15:56

ลองเปลี่ยนเป็น Class แล้วนิ่งครับ

โค้ด เลือก

<body onload="initdocument.getElementsByClassName('text'));rattleimage()">
<p>
<div class="text" onClick="top.focus()">Shake TEXT Script4</div>
<div class="text" onClick="top.focus()">Shake TEXT Script5</div>
<div class="text" onClick="top.focus()">Shake TEXT Script6</div>
</p>
</body>

takumiz · 12 สิงหาคม 2013, 00:23:02

เพิ่งไล่โค๊ดละเอียดมะกี้ คงต้องแปลงโค๊ดหน่อยละครับ ถ้าจะทำให้ดิ้นพร้อมกัน เด๋วผมลองเขียนกากๆให้ (ปล.ช้าหน่อยนะ เครื่องนี้ไม่มีดรีม เขียน notepad สดให้)

Meen2007 · 14 สิงหาคม 2013, 12:40:41

ทำได้แล้วครับ
ดูโค้ดด้านบนเลย

sys2528 · 14 สิงหาคม 2013, 13:17:36

ขอบคุณมากครับผม เข้ามารับความรู้ครับ ^^