tutorial #19 :spinning effect pada comment avatar

Okay , apit belajar benda ni kat blog mas ahmad safwan , blog dia smart wookk .Terbaek dari ladang , :face64: Hee , Okay function benda alah ni kalau kita tujukan cursor pada gambar orang yang komen nanti gambar tersebut akan berpusing-pusing , hanya pada gambar komen saje ok ! yang lain maybe tak jadi kot :face69: So kalau nk tngok example , korang pergilah mane-mane entry apit yg ada orang komen then try ,
Jom mula .
:65:Design:65:Edit layout:65:Add a gadjet:65:Html javascript
And paste kode ni .
<style type="text/css">


.avatar-image-container img, comments .avatar-image-container img {

-webkit-transition-duration: 0.8s;

-moz-transition-duration: 0.8s;

-o-transition-duration: 0.8s;

transition-duration: 0.8s;

</style>


<script src="https://sites.google.com/site/javascript10/mootools-1.3.js"></script>


<script>

window.addEvent("domready",function() {


// "Globals" - Will make things compress mo-betta

var $random = function(x) { return Math.random() * x; };

var availableWidth = 0, availableHeight = 0;

var cssPrefix = false;

switch(Browser.name) {

case "safari":cssPrefix = "webkit";break;

case "chrome":cssPrefix = "webkit";break;

case "firefox":cssPrefix = "moz";break;

case "opera":cssPrefix = "o";break;

}


// The Icons

var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");

// Apply opacity

var zIndex = 1000;

// Randomize each link

icons.each(function(element,index) {

var startDeg =(360);

var resetPlace = function() {

element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");

}

element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);

resetPlace();

element.addEvents({

mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},

mouseleave: resetPlace});

});

});

</script>


Okay ? Then save ! :face15: Lepas tu korang pepandai la tngok jadi ke x ok ?

5 comments:

AWAN said...

YA ALLAH!!!thangs soooooooooo much 4 thesh tuto apit!da lame AWAN carik..jumpa pown..T___T
thangs!:")

tiqasandsbox said...

tak pusing kot!

Una said...

thanks apit! ^_^

Syaidatul Nur Liyana said...

Ngee~...thankz2...jadik...Arigato...Arigato...

Tieykalicious said...

TAK JADIK :(

Subscribe