Főoldal » ASP.NET és JQuery – Kép átlátszóságának változtatása

ASP.NET és JQuery – Kép átlátszóságának változtatása

MEGOSZTÁS

Ha tetszett a cikk, akkor nyugodtan oszd meg ismerőseiddel, valószínű ők is örülni fognak neki.

A mai bejegyzésben JQuery technológiát felhasználva mutatom be, hogy miképp lehet megvalósítani a kép átlátszóságának módosítását hover eseményre. A bemutató érdekében a CSS és JQuery kódot ugyanazon oldalba integráltam bele. Ne vesztegessük tovább az időt, lássuk, hogy lehet mindezt megvalósítani!

Szükséged lesz egy images mappára és benne legalább egy képre, jelen esetben én négyet használok. Másold be az alábbi kódot és ha mindent jól csináltál, már láthatod is a végeredményt:



   
   

   

   



   

   

       
       

       
       
       
       
   

   


 

A forráskódban megfigyelheted, hogy minden Image vezérlőnek beállításra került egy CSS osztály, amelynek definícióját itt (is) láthatod:

.imgOpa
        {
            width: 150px;
            height: 100px;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }

 

Az oldal betöltődésekor a képek áttetsző állapotban vannak. Firefoxban, Chromban és Safariban az átlátszóság tulajdonságát az opacity:n attribútummal tudjuk állítani, ahol n az áttetszőség mértéke, 0.0 – 1.0 tartományból választható, ahol az alacsonyabb érték nagyobb átlátszóságot jelent. IE7-ben és annál újabb verzióiban filter: alpha(opacity=n) formátumban adhatjuk meg ezen tulajdonságát, ahol n a 0-100 tartományból kerülhet ki.

Az oldal betöltődésekor az alábbi formában látszanak a képek : 

NewPicture

Amikor a felhasználó a kép fölé mozgatja az egeret, a JQuery hover() metódusa kerül meghívásra, amelyben az átlátszóság értéke kerül animálásra, egészen az 1-es értékig, amelyet az alábbi kódrészlet valósít meg:

 $(function() {
            $('.imgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
                   })
            });
        });

A végeredmény pedig itt látható: 

NewPicture_1

Remélem hasznotokra volt ez a kis bemutató!

Forrás: http://www.dotnetcurry.com/ShowArticle.aspx?ID=438

MEGOSZTÁS

Ha tetszett a cikk, akkor nyugodtan oszd meg ismerőseiddel, valószínű ők is örülni fognak neki.

HOZZÁSZÓLÁS

Ha nem hagy nyugodni az, amit a cikkben olvastál, akkor nyugodtan írd meg kérdésed vagy észrevételed kommentbe. Így szerzőnk könnyen tud neked válaszolni.

Vélemény, hozzászólás?