Fx.Element Javascript Yapimi !!

Merhaba, Ziyaretçi! (Kayıt Ol — Şifremi Unuttum)

Blackinci bilgilerini paylaştığı kişisel
web sitesi
blackinci.com
Kategoriler halinde düzenlenmiş program arşivi
indirnet.org
Reklam Vermek İster misiniz
İletişim
500 Mb Hosting
10 GB Trafik
Yıllık : 30 YTL
dinamithosting.com
iyinet webmaster forumu 2008 seo yarışması
oqtr.com
MYBB Kurmaya Uygun
Ücretsiz Kurulum
Turhost.com

Normal Mod | Çizgisel Mod

Fx.Element Javascript Yapimi !!

Yazar Mesaj

Fantasty
Grafiker - Tasarımcı

Mesajlar: 101
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 5

Mesaj: #1

Fx.Element Javascript Yapimi !!

Merhaba arkadaslar..

Belki bileniniz vardir ama google sitenizdeki tasariminiza ve diger sitelerde olmayan ozgun ozelliklerinize de deger verir..Hemde cok Gülücük

Son Yillarda gelisen ve yayginlasan Ajax ve Javascript ile sitelerimiz daha da guzellesiyor..Ben size bu dersimde Fx.Element Denilen Javascriptin nasil yapilacagini gostericem...

Ornek Gorunum: http://www.photoshoptasarim.com/ornekgorunum.html
Konu Adi : Fx.Element
Tür : Javascript
Zorluk Derecesi : Orta
Neler Gerekli : Sitenizde Koyulacak Bos yer

Eklenti gonderemedigim icin asagida link verdim oradan javascript dosyasini ve yanindaki ornek html dosyasini bulabilirsiniz..

Nasil Yapicaz?

İlk Olarak Nereye Koyacamizi belirleyelim..Sonra javascript dosyamizi istediginiz yere (...com/jscript) atin...Sonra asagidaki kodlari ekleyelim..

PHP Kodu:

<script type="text/javascript" src="http://www.photoshoptasarim.com/jscripts/motulmuaha.js"></script>
    
<script type="text/javascript">
    window.addEvent('domready', function(){
var szNormal = 98, szSmall  = 100, szFull   = 125;
 
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
    kwick.addEvent("mouseenter", function(event) {
        var o = {};
        o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
        kwicks.each(function(other, j) {
            if(i != j) {
                var w = other.getStyle("width").toInt();
                if(w != szSmall) o[j] = {width: [w, szSmall]};
            }
        });
        fx.start(o);
    });
});
 
$("kwicks").addEvent("mouseleave", function(event) {
    var o = {};
    kwicks.each(function(kwick, i) {
        o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
    });
    fx.start(o);
})
            
        }); 
</script>

<style type="text/css">

#kwicks {position: center;}
#kwicks .kwick {float: left; display: block; width: 98px; height: 100px; text-align: center; overflow:hidden; } /*wd==onload only, change in szNormal */
#kwick .kwick span {
    display: none;
}
#kwick_red {background-image: url(http://www.photoshoptasarim.com/images/js/1.png);}
#kwick_orange {background-image: url(http://www.photoshoptasarim.com/images/js/2.png);}
#kwick_yellow {background-image: url(http://www.photoshoptasarim.com/images/js/3.png);}
#kwick_green {background-image: url(http://www.photoshoptasarim.com/images/js/4.png);}


</style>

<h3>Kwick</h3>
<div id="kwicks_container">
    <ul id="kwicks">

        <li id="kwick_red" class="kwick">
            <span></span>
        </li>
        <li id="kwick_orange" class="kwick">
            <span></span>
        </li>
        <li id="kwick_yellow" class="kwick">
            <span></span>
        </li>

        <li id="kwick_green" class="kwick">
            <span></span>
        
    </ul><span class="clr"><!-- spanner --></span>
</div>
</div>
</center> 

Simdi buradaki ince ayrintilari vereyim...
Yukarida

Alıntı:

#kwick_red {background-image: url(http://www.photoshoptasarim.com/images/js/1.png);}

Yazan yeri istediginiz resimle degistirebilirsiniz..Bunun boyutlarini da onun hemen 2 satir uzerindeki ;

Alıntı:

#kwicks .kwick {float: left; display: block; width: 98px; height: 100px; text-align: center; overflow:hidden; } /*wd==onload only, change in szNormal */

width ve height degerlerinin yanindaki pixel ayarlarini degistirerek yapabilirsiniz...

Saygilar,

DOSYA : BURDAN İNDİREBİLİRSİNİZ Gülücük

En son düzenleme: 31-12-2007 02:38 Fantasty.

31-12-2007 02:31