Bir Js deki kucuk bir css sorusu :)

Fantasty · 23/12/2007, 18:58

Herkese iyi gunler,
Adim aLp istanbulda Universitede Grafik Tasarim'da okuyorum..

Bir photoshop (http://www.photoshoptasarim.com) sitesi actim ve insanlara ps ogretmek icin yola koyuldum..Forum'umu daha cekici hale getirmek icin guzel js ler buluyorum..

Bir tane buldum ancak kosesini http://mootools.net anasayfasinda yer alan javascript'in sag kosesindeki yuvarlamayi yapamadim...

Asagiya kendi css kodlarimi yaziyorum.Koselerin beyaz olmasini istiyorum..Nasil yapildigini cok arastirdim ancak fazla kodlardan anlamadigim icin yapamadim

Bu js yi biraz zor calistirdim

Yardimlarinizi bekliyorum link verip burda var demeyin lutfen gercekten yapamiyorum

Saygilar..

PHP Kodu:

  
<html>
<head>

<script type="text/javascript" src="jscripts/mootools.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(js/1.png);}
#kwick_orange {background-image: url(js/2.png);}
#kwick_yellow {background-image: url(js/3.png);}
#kwick_green {background-image: url(js/4.png);}


</style>

Ornek gorunum icin ;
http://www.photoshoptasarim.com/deneme/deneme.html

turkerunutmaz · 24/12/2007, 00:37

Ekte verdiğin siteden çektiğim js dosyaları ve sadeleşmiş css dosyası var. yanları siyah yaptım yuvarlaktansa her sayfada kullanırım diye ben sitemde kullanicam çok guzel oldu bence.

23/12/2007, 18:58	#1 (permalink)
Fantasty Üye Üyelik Tarihi: 12/2007 Mesaj: 1	Bir Js deki kucuk bir css sorusu :) Herkese iyi gunler, Adim aLp istanbulda Universitede Grafik Tasarim'da okuyorum.. Bir photoshop (http://www.photoshoptasarim.com) sitesi actim ve insanlara ps ogretmek icin yola koyuldum..Forum'umu daha cekici hale getirmek icin guzel js ler buluyorum.. Bir tane buldum ancak kosesini http://mootools.net anasayfasinda yer alan javascript'in sag kosesindeki yuvarlamayi yapamadim... Asagiya kendi css kodlarimi yaziyorum.Koselerin beyaz olmasini istiyorum..Nasil yapildigini cok arastirdim ancak fazla kodlardan anlamadigim icin yapamadim Bu js yi biraz zor calistirdim Yardimlarinizi bekliyorum link verip burda var demeyin lutfen gercekten yapamiyorum Saygilar.. PHP Kodu: <html> <head> <script type="text/javascript" src="jscripts/mootools.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(js/1.png);} #kwick_orange {background-image: url(js/2.png);} #kwick_yellow {background-image: url(js/3.png);} #kwick_green {background-image: url(js/4.png);} </style> Ornek gorunum icin ; http://www.photoshoptasarim.com/deneme/deneme.html

Benzer Konular
Konu	Konuyu açana göre	Forum	Cevap	En Son Mesaj
iki kucuk sorum olucakti...	CaCao	C / C++	7	07/10/2007 20:57
Kucuk kucuk resimlerden Resim olusturmak	burhanmt	Uygulama Yazılımları / Hazır Betikler	0	17/01/2007 07:29
Replace Buyuk Kucuk	Jayhoonova	PHP	10	05/06/2005 22:56
kucuk bi sorun ama....	lucyanobg	C / C++	1	09/02/2005 11:31
Buyuk Kucuk Harf	spid_erman	PHP	3	22/09/2004 17:27

Seçenekler
Yazdırmaya Uygun Sayfa Sayfayı E-posta İle Gönder