Wednesday 27 July 2011

Buat Efek Gambar Berputar seperti jam

 pegi Dashboard > Design > Page Elements > Add Gadget > HtmL Javascript

copy and paste kod kat bawah ni..

sebelum save.. text purple kena ganti ngan URL GAMBAR anda..

<style type="text/css">
* {margin: 0;padding: 0;}#clock {position: relative;width: 300px;height: 300px;margin: 10px auto 0 auto;background: url();list-style: none;}#sec, #min, #hour {position: absolute;width: 331px;height: 220px;top: 0px;left: 100px;}#sec {background: url();z-index: 3;}#min {background: url();z-index: 2;}#hour {background: url();z-index: 1;}p {text-align: center; padding: 10px 0 0 0;}
</style><script src="http://generation-platinum.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
</script><script type="text/javascript">
$(document).ready(function() {setInterval( function() {var seconds = new Date().getSeconds();var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});}, 1000 );setInterval( function() {var hours = new Date().getHours();var mins = new Date().getMinutes();var hdegree = hours * 30 + (mins / 2);var hrotate = "rotate(" + hdegree + "deg)";$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );setInterval( function() {var mins = new Date().getMinutes();var mdegree = mins * 6;var mrotate = "rotate(" + mdegree + "deg)";$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});}, 1000 );});
</script><ul id="clock"><li id="sec"><div class="details">
<img src="URL GAMBAR" /></div>
</li>
</ul>

ok..skarang boleh la click save..
letak kat sidebar tuu~ :)

No comments: