Path Animation Technique

D??i ?�y l� m?t k? thu?t minh h?a k?t h?p gi?a CSS v� Javascript ?? t?o c�c ?nh ??ng.


B?m V�O ?�Y ?? xem hi?u ?ng c?a b�i h??ng d?n n�y

?? l�m ???c nh? v?y, ch�p ?o?n Code sau d�n v�o ph?n <head></head>, Right Click v� Save 2 File ?nh tr�n v�o c�ng th? m?c v?i file HTML (ho?c thay ???ng d?n tuy?t ??i t?i h�nh ?nh.)


<script language="javascript" type="text/javascript">
t=0; function moveittop(){ document.getElementById("electron").style.top =165*Math.cos(180*Math.PI/180)*Math.cos(t) - 40*Math.sin(45*Math.PI/180)*Math.sin(t) + 190; document.getElementById("earth").style.left =200*Math.sin(180*Math.PI/180)*Math.cos(t) + 40*Math.cos(45*Math.PI/180)*Math.sin(t) + 175; t = t + .1; setTimeout("moveittop(t)",100); } t=0; function moveitleft(){ document.getElementById("electron1").style.top =165*Math.cos(270*Math.PI/180)*Math.cos(t) - 40*Math.sin(45*Math.PI/180)*Math.sin(t) + 190; document.getElementById("earth1").style.left =174*Math.sin(270*Math.PI/180)*Math.cos(t) + 40*Math.cos(45*Math.PI/180)*Math.sin(t) + 180; t = t + .1; setTimeout("moveitleft(t)",100); } t=0; function moveit_45(){ document.getElementById("electron2").style.top =165*Math.cos(230*Math.PI/180)*Math.cos(t) - 30*Math.sin(45*Math.PI/180)*Math.sin(t) + 195; document.getElementById("earth2").style.left =165*Math.sin(230*Math.PI/180)*Math.cos(t) + 30*Math.cos(45*Math.PI/180)*Math.sin(t) + 180; t = t + .1; setTimeout("moveit_45(t)",100); } t=0; function moveit_135(){ document.getElementById("electron3").style.top =165*Math.cos(135*Math.PI/180)*Math.cos(t) - 30*Math.sin(315*Math.PI/180)*Math.sin(t) + 195; document.getElementById("earth3").style.left =165*Math.sin(135*Math.PI/180)*Math.cos(t) + 30*Math.cos(315*Math.PI/180)*Math.sin(t) + 170; t = t + .1; setTimeout("moveit_135(t)",100); } function moveit(){ moveittop(t); moveitleft(t); moveit_135(t); moveit_45(t); }
</script>


Th�m c�c d�ng codes sau ?�y v�o trong ph?n BODY:


<form>
<input type="button" value="Move It" onclick="'moveit();'">
</form>
<div id="atomic" style="position:absolute; top:200; left:300;">
<img src="http://thuchanh.it2know.googlepages.com/atomback.gif" />
<div id="electron" style="position:absolute; top:25; left:175;">
<imgsrc="http://thuchanh.it2know.googlepages.com/electron.gif"></div>
<div id="electron1" style="position:absolute; top:190; left:15;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" /></div>
<div id="electron2" style="position:absolute; top:90; left:50;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" /></div>
<div id="electron3" style="position:absolute; top:90; left:270;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" />
</div>
</div>
</div>


T�y theo m�n h�nh m� b?n c� th? ph?i thay ??i gi� tr? t?a ?? ?? c�c h?t electron n?m ngay tr�n ??nh c?a Atom. B?n c� th? c?n th�m v�o h�m Stop It ?? ng?ng s? chuy?n ??ng c?a h?t electron.

?? Test b�i n�y, b?n c?ng c� th? ch�p c? 2 ?o?n Code tr�n V�O ?�Y ?? th?y k?t qu?

Submit Article :- Digg + Technorati + del.icio.us + Stumbleupon + Reddit + BlinkList + Furl + Yahoo+ Blogmarks + Ekstreme Socializer
POSTED IN : , |

This entry was posted on 23:53 and is filed under , .Follow any comments here with the RSS 2.0 . You can leave a response so that we can know your suggestion.
0 Responses to "Path Animation Technique"

Đăng nhận xét