Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

Guest

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

Code

<!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>

<script language="JavaScript1.2">

//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
shake.style.position='relative';
}

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>
<div class=class="shaker"  onClick="top.focus()" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()"/>Shake TEXT Script1</div>
</p>
<div class=class="shaker"  onClick="top.focus()" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()"/>Shake TEXT Script2</div>
</p>
<div class=class="shaker"  onClick="top.focus()" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()"/>Shake TEXT Script3</div>
</p>
</body>
</html>

Tag : JavaScript

Date : 2013-08-11 21:11:05

By : mr.meen

View : 1564

Reply : 9

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Date : 2013-08-13 09:07:32

By : mr.win

No. 2

Guest

แก้ไขโค้ดด้านบนที่ลงไว้ผิดครับ

Code

<!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 (www.dynamicdrive.com)
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>

โค้ดตัวนี้น่าสนใจครับ เพียงแต่ผมแค่อยากให้มันเขย่าเลยโดยไม่ต้องรอเอาเมาส์ทไปชี้ เอามาลงไว้เพื่อเป็นประโยชน์แก่ท่านอื่นๆ ทำไม่ได้ก็ไม่เป็นไรครับ ผมแค่อยากมากไปเองเท่านั้น
ที่มา : http://www.dynamicdrive.com/dynamicindex4/shake.htm

Date : 2013-08-13 11:58:49

By : mr.meen

No. 3

LittleLovely

โพสกระทู้ ( 310 )
บทความ ( 0 )

Quote:
ง่ายๆค่ะ แค่เพิ่มส่วนของ onload ในแท็ก body เท่านั้นเอง

<body onload="init(shakeimg1);rattleimage();" >

และกำหนดไอดีให้แท็กที่ต้องการเขย่า

<img id="shakeimg1" src="http://www.dynamicdrive.com/dynamicindex4/Image1.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

Date : 2013-08-13 14:30:01

By : survivor

No. 4

Guest

ขอบคุณมากนะครับ
แต่วิธีนี้ผมลองมาหลายวันแล้ว มันเขย่าแค่อันแรกเพียงอันเดียว คือต้องการให้มันเขย่าหลายๆอันพร้อมๆกันด้วยครับ

Code

Date : 2013-08-13 17:34:15

By : mr.meen

No. 5

LittleLovely

โพสกระทู้ ( 310 )
บทความ ( 0 )

ขอเขียนใหม่ให้เป็นแบบที่ถนัดน่ะค่ะ

<!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;
	var left_pos,top_pos;
	var shakingID = setInterval(function(){
		left_pos = Math.round(Math.random() * 10)+'px';
		top_pos = Math.round(Math.random() * 10)+'px';
		$(".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"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

ตัวอย่างการรันโค้ดค่ะ http://jsfiddle.net/NxwMa/

ประวัติการแก้ไข
2013-08-14 00:26:25

Date : 2013-08-14 00:23:09

By : survivor

No. 6

meen

โพสกระทู้ ( 88 )
บทความ ( 0 )

เยี่ยมครับ แต่ถ้าไม่ต้องหยุดเขย่าเลย ต้องทำไงครับ
(เพิ่ง Login ผ่าน)

Date : 2013-08-14 11:31:41

By : Meen2007

No. 7

LittleLovely

โพสกระทู้ ( 310 )
บทความ ( 0 )

1ปีจึงจะหยุดค่ะ

duration= 365*24*60*60*1000 หน่วยเป็น milisec.

Date : 2013-08-14 11:50:51

By : survivor

No. 8

meen

โพสกระทู้ ( 88 )
บทความ ( 0 )

แบบให้มัน วนลูป ไปเรื่อยๆ ไม่ต้องกำหนดไม่มีเหรอครับ
ถ้าระบบมันไม่มีไม่เป็นไรครับ เท่าที่ได้ก็ขอบคุณมากแล้วครับ ใส่ไป 100 ปีคงได้มั่ง +555
ขอบคุณ LittleLovely ครับ

Date : 2013-08-14 11:59:18

By : Meen2007

No. 9

meen

โพสกระทู้ ( 88 )
บทความ ( 0 )

ผมลองตัด var duration= 5000; ทิ้งไปเลย มันก็ยังเขย่าอยู่นะครับ

Date : 2013-08-14 12:12:08

By : Meen2007

ค้นหาข้อมูล

แสดงความคิดเห็น

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

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก