Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Mario Lopes
Added: Feb 20, 2018 9:49 AM
Views: 24
Move uma imagem numa página web
  1. <html>
  2. <head>
  3.   <script
  4.   src="http://code.jquery.com/jquery-3.3.1.min.js"
  5.   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  6.   crossorigin="anonymous"></script>
  7. <link rel="stylesheet" type="text/css" href="loja.css">
  8. </head>
  9. <body>
  10. <br/>
  11. <br/>
  12. <br/>
  13. <br/>
  14. <table>
  15. <tr>
  16. <td> <img src="rosa.jpg"><br/>
  17. <button type="button">Comprar!</button>
  18. </td>
  19. <td><img src="branca.jpg"> <br/>
  20. <button type="button">Comprar!</button>
  21. </td>
  22. <td><img src="azul.jpg"><br/>
  23. <button type="button">Comprar!</button>
  24.  </td>
  25. </tr>
  26. </table>
  27. <script>
  28.         $("button").click(function() {   
  29.           var img = $(this).prevAll("img").clone()
  30.             .addClass("zoom")
  31.             .appendTo("body");
  32.           setTimeout(function() {
  33.             img.remove()
  34.           }, 1000);
  35.         });
  36.  
  37. </script>
  38. </body>
  39. </html>
  40. //eis o código CSS
  41. .zoom{
  42.         position:absolute;     
  43.         top:10px;
  44.         right:50%;
  45.         width:40px;
  46.         opacity:0.5;
  47.         animation:zoom 1s ease forwards;
  48. }
  49. @keyframes zoom{
  50.         0%{opacity: 0} 
  51.         50%{opacity: 1}
  52.         100%{opacity: 1;right:80px;}
  53. }
  54.  
  55.