Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Po najechaniu myszką na zdjęcie efekt jak na imageshack
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
aleks365
18.07.2012, 10:20:04
Witam

Szukałem na internecie takiego efektu
http://imageshack.us/photo/my-images/525/m...nnsipmsnns.jpg/
chodzi że jak myszką najedzie się na obrazek to u góry w rogu są opcje a ja szukam takiego czegoś tylko żeby się to pojawiało w rogu na dole po lewej stronie dokładnie mi chodzi o to że jak najadę myszką na obrazek to żeby tam było żeby polecić na Facebooka itp to już sobie bym zrobił jedynie prosił bym o taki efekt jak na imageshack.us że tylko coś się pojawia po najechaniu kursorem ja już jak mówiłem bym sobie resztę zrobił

Dziękuje z góry i pozdrawiam aleks365 smile.gif
piotrex41
18.07.2012, 10:26:17
Zrób sobie DIVa z tymi przyciskami i poprzez position:absolute; umieść to tam gdzie chcesz i dodaj display:none;
Teraz w jQuery musisz zrobić żeby po zdarzeniu .mouseover() display tego DIVa zmieniał się na block -> .css('display', 'block');, a po opuszczeniu .mouseout(), znów był display none -> .css('display', 'none');
To jest bardzo prosty skrypt smile.gif
aleks365
18.07.2012, 10:27:56
Bardzo bym prosił o jakiś przykład jestem bardzo cienki z JavaScript dopiero zaczynam
strife
18.07.2012, 10:31:02
Cytat(aleks365 @ 18.07.2012, 11:27:56 ) *
Bardzo bym prosił o jakiś przykład jestem bardzo cienki z JavaScript dopiero zaczynam


http://api.jquery.com/hover/


http://stackoverflow.com/questions/9489926...-image-show-div
aleks365
18.07.2012, 10:31:55
Dzięki wielkie o to mi chodziło smile.gif
piotrex41
18.07.2012, 10:49:51
Wszystko w jednym pliku, żebyś zobaczył jak to wygląda, testowane. Teraz musisz tylko sobie dostosować do potrzeb, bo to jest tylko przykład.
Kod
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    <script>
    $(function($){
        $('div#divv').mouseover(function()
        {
            $('div#options').addClass('active');
        }).mouseout(function()
        {
            $('div#options').removeClass('active');
        });
    });
    </script>
    
    <style>
div#divv {position:relative;width:218px;height:156px;}
div#options {position:absolute;top:3px;right:3px;background:rgba(0,0,0,.3);padding:2px;color:#fff;display:none;}
div.active {display:block!important;}
    </style>
</head>
<body>

    <div id="divv">
        <img src="img.png" alt="" />
        <div id="options">ZOOM | Cokolwiek</div>
    </div>

</body>
</html>
aleks365
18.07.2012, 11:33:41
o dzięki jeszcze lepiej smile.gif

mam jeden mały problem nie wiem jak zrobić aby pojawiający się tekst pojawiał się na dole z lewej strony
piotrex41
18.07.2012, 12:20:50
Kod
div#options {position:absolute;top:3px;right:3px;background:rgba(0,0,0,.3);padding:2px;color:#fff;display:none;}

zamień na:
Kod
div#options {position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.3);padding:2px;color:#fff;display:none;}


Konkretnie zamieniasz
Kod
top:3px;right:3px;

na:
Kod
bottom:3px;left:3px;

A 3px oznacza odsunięcie 3px.
aleks365
18.07.2012, 12:49:30
ok dzięki działa mam jeszcze jeden problem dodałem animacje że po najechaniu pojawia się tak powoli

kod
[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
  2. <script>
  3.     $(function($){
  4.         $('div#divv').mouseover(function()
  5.         {
  6. 			$('div#options').animate({opacity: '+=0.9'}, 500);
  7.             $('div#options').addClass('active');
  8.         }).mouseout(function()
  9. 		{
  10. 			$('div#options').animate({opacity: '-=0.9'}, 1);
  11.             $('div#options').removeClass('active');
  12.         });
  13.     });
  14. </script>
  15.  
  16.  
  17. <style>
  18. div#divv {
  19. 	position:relative;
  20. 	width:350px;
  21. }
  22.  
  23. div#options {
  24. 	position:absolute;
  25. 	bottom:0px;
  26. 	background:rgba(0,0,0,.3);
  27. 	padding:2px;
  28. 	margin:5px;
  29. 	color:#fff;
  30. 	display:none;
  31. 	float:left;
  32. 	opacity: 0.0;
  33. }
  34.  
  35. div.active {
  36. 	display:block!important;
  37. }
  38. </style>
  39.  
  40. <div id="divv">
  41. <img src="http://lfs-driver.pl/image/425/xf_volkswagen_golf_mk2_gt_v11/" />
  42. <div id="options">ZOOM | Cokolwiek | Najedz myszką tutaj</div>
  43. </div>
[HTML] pobierz, plaintext


i jak się myszką najedzie na to co się pojawia czyli (ZOOM | Cokolwiek | Najedz myszką tutaj) to jakoś się ściemnia i szybko rozjaśnia zobacz sam co jest nie tak?
piotrex41
18.07.2012, 12:57:29
Kod
<script>
    $(function($)
    {
        $('div#divv').mouseover(function()
        {
            $('div#options').stop().animate({opacity: '+=0.9'}, 500);
            $('div#options').addClass('active');
        }).mouseout(function()
        {
            $('div#options').stop().animate({opacity: '-=0.9'}, 1);
            $('div#options').removeClass('active');
        });
    });
</script>

Zapomniałeś użyć .stop(). Już jest OK.
aleks365
18.07.2012, 13:15:15
No faktycznie mówiłem że jestem początkujący jeszcze raz dzięki wielkie dzięki smile.gif

jeszcze coś ale to nie jest pilne ani ważne

nie wiem czemu nie działa funkcja
[HTML] pobierz, plaintext 
  1. $('div#options').stop().animate({opacity: '-=0.9'}, 1);
  2. $('div#options').removeClass('active');
[HTML] pobierz, plaintext


chodzi o to że jak znajdę myszką z tego tekstu to on znika od razu wydaje mi się że trzeba dać po .animate display:block ale nie jestem pewny i nie wiem jak
piotrex41
18.07.2012, 13:48:17
To mój inny skrypt, który robi to co chcesz zrobić czyli po najechaniu zwiększa opacity. Może skorzystasz...
Kod
    $('.opacity').fadeTo('normal', .5).hover(
        function()
        {
            $(this).stop().fadeTo('normal', 1);
        },
        function()
        {
            $(this).stop().fadeTo('normal', .5);
        }
    );
aleks365
18.07.2012, 20:51:28
ok

witam ponownie

dręczy mnie jeszcze coś chciałem ten skrypt wykorzystać do tego że jak myszką najadę na artykuł na stronie to żeby były wyświetlane komentarze dokładnie ilość komentarzy ale jak biorę to robię i najadę myszką na pierwszy wpis to u wszystkich innych też się pojawia ilość komentarzy czemu tak nie da się jakoś id przypisać osobno tak żeby była ilość komentarzy tylko tam gdzie najadę myszką

Tutaj jest nowy temat o tym
Temat: Jak przypisac oznaczenie id do kazdego diva

jak coś pisz tam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.