Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Po najechaniu myszką na zdjęcie efekt jak na imageshack, imageshack.us
aleks365
post 18.07.2012, 10:20:04
Post #1





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
piotrex41
post 18.07.2012, 10:26:17
Post #2





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 10:27:56
Post #3





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

Bardzo bym prosił o jakiś przykład jestem bardzo cienki z JavaScript dopiero zaczynam
Go to the top of the page
+Quote Post
strife
post 18.07.2012, 10:31:02
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

Ostrzeżenie: (0%)
-----

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


--------------------
Najczęstsze błędy | Jak poprawnie zadać pytanie? | Serwer PHP - od czego zacząć?
SQL Injection | Hashowanie haseł | Jak działają sesje, przykłady

___
The world is yours ...
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 10:31:55
Post #5





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

Dzięki wielkie o to mi chodziło smile.gif
Go to the top of the page
+Quote Post
piotrex41
post 18.07.2012, 10:49:51
Post #6





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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>


Ten post edytował piotrex41 18.07.2012, 10:51:05


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 11:33:41
Post #7





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

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

Ten post edytował aleks365 18.07.2012, 11:49:51
Go to the top of the page
+Quote Post
piotrex41
post 18.07.2012, 12:20:50
Post #8





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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.

Ten post edytował piotrex41 18.07.2012, 12:22:39


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 12:49:30
Post #9





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

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?

Ten post edytował aleks365 18.07.2012, 12:53:10
Go to the top of the page
+Quote Post
piotrex41
post 18.07.2012, 12:57:29
Post #10





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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.


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 13:15:15
Post #11





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
piotrex41
post 18.07.2012, 13:48:17
Post #12





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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);
        }
    );


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
aleks365
post 18.07.2012, 20:51:28
Post #13





Grupa: Zarejestrowani
Postów: 134
Pomógł: 1
Dołączył: 26.02.2012

Ostrzeżenie: (0%)
-----

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

Ten post edytował aleks365 19.07.2012, 09:02:19
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 27.04.2024 - 01:47
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn