[JavaScript] Efekt na Obrazku Opcje

[Cevo125]

Witam, poszukuję skryptu JS , który będzie wyglądał jak na stronie http://www.adidas.pl/football/ , poniżej slidera. Mianowicie chodzi mi o to , po najechaniu myszką na obrazek przyciemnia się i wyskakują opcje zobacz "Trenuj->" , "Zobaccz" itp. Proszę o pomoc.

[viking]

A czy to taki wielki problem zerknąć w źródło i zobaczyć czego używają? 10 sekund

<script type="text/javascript" src="//hp.static.adidas.com/brand/platform//js/features.js"></script>

[Cevo125]

No tak ale co dalej ?

[viking]

A co byś chciał? Dołączyć jQuery, przepisać skrypt do swoich danych na stronie i zacząć trochę myśleć czasami.

I po co stworzyłeś dwa identyczne tematy w różnych działach?

Ten post edytował viking 16.09.2012, 10:25:13

[Cevo125]

Jestem początkujący . Więc prosilem o pomoc

@viking

Ponieważ nie byłeś w stanie mi pomóc.

Ten post edytował Cevo125 16.09.2012, 10:44:20

[viking]

To że jesteś początkujący nie oznacza że mamy coś za ciebie robić. Tym bardziej że masz już cały kod który potrzebujesz na podanej stronie. Wystarczy zerknąć do podanego pliku. Jeśli czegoś nie wiesz napisz jak zrobiłeś, czego oczekujesz, wklej ten kod tutaj (w odpowiednich tagach) i wykaż się trochę. Na tę chwilę prezentujesz postawę, nie chce mi się - zróbcie za mnie.

[Cevo125]

JS:

[PHP] pobierz, plaintext 
$(function() {
    $(".list-bnr").hover(function () {
        $(this).find(".imgOver").stop(true).animate({opacity:0.5, filter: 'alpha(opacity=50)'}, 150);
        $(this).find(".overLink").stop(true).animate({opacity:0.9, filter: 'alpha(opacity=90)', top:0}, 250);
    },function () {
        $(this).find(".imgOver").stop(true).animate({opacity:0, filter: 'alpha(opacity=0)'}, 300);
        $(this).find(".overLink").stop(true).animate({top:30, opacity:0, filter: 'alpha(opacity=0)'}, 250);
    });
 
});
[PHP] pobierz, plaintext 

Jak dopasować to do danego obrazka

[viking]

Poszukaj na stronie klas .imgOver i .overLink (firebug, klik na zdjęciach). Zobacz jak zrobione. Jeśli chcesz inne nazwy to zwyczajnie je zmień.

[Cevo125]

Napisałem sobie to w css , teraz jak można to przerobić na JS?

[PHP] pobierz, plaintext 
div.top {
 
	position: relative;
	width: 230px;
	height: 180px;
 
	overflow: hidden;
	}	
 
	div.top div {
		width: 230px;
		height: 180px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
 
		text-align: center;
		background: #fff;
   		-webkit-transition: left 1s ease-in-out;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	-webkit-transition: left 1s ease-in-out;
	left: -230px;
	}
[PHP] pobierz, plaintext