whiplk

[Syntax] - Animação de elementos dinâmica(v2)

Feb 13th, 2013
118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 1.83 KB | None | 0 0
  1. <html>
  2. <head>
  3. <title>title</title>
  4. <style type="text/css">
  5.     #grays
  6.     {
  7.         position:absolute;
  8.         background-color:gray;
  9.         width:50px;
  10.         height:50px;
  11.         border-radius:80px;
  12.     }
  13.     .EstruturaBasica
  14.     {
  15.         position:relative;
  16.         border-bottom-color:#F00;
  17.         border:1px solid #000;
  18.         width:200px;
  19.         height:200px;
  20.         float:left;
  21.         top:0px;
  22.         left:0px;
  23.         margin:10px;   
  24.     }
  25. </style>
  26. <script src="jquery-1.7.1.min.js"></script>
  27. <script src="jquery.easing.1.3"></script>
  28. <script>
  29. $(document).ready(function(){
  30.     var numeroOBJ = 13;
  31.     document.getElementById("corpo").innerHTML += "<div id=\"grays\"></div>";
  32.     for(var j = 0; j < numeroOBJ; j++)
  33.     {
  34.         document.getElementById("corpo").innerHTML += "<div id=\"id"+(j + 1)+"\" class=\"EstruturaBasica\"></div>";
  35.     }
  36.     $(document).click(function(e){
  37.         for(var i = 1; i <= numeroOBJ; i++)
  38.         {
  39.             if (e.pageX > (document.getElementById("id" + i).offsetLeft + (document.getElementById("id" + i).offsetWidth / 2) - 100)
  40.                 && e.pageX < (document.getElementById("id" + i).offsetLeft + (document.getElementById ("id" + i).offsetWidth / 2) + 100)
  41.                 && e.pageY > (document.getElementById("id" + i).offsetTop + (document.getElementById("id" + i).offsetHeight / 2) - 100)
  42.                 && e.pageY < (document.getElementById("id" + i).offsetTop + (document.getElementById("id" + i).offsetHeight / 2) + 100))
  43.             {
  44.                 var grays = new Array(2);
  45.                 grays[0] = (document.getElementById("id" + i).offsetLeft + (document.getElementById("id" + i).offsetWidth / 2)) - (document.getElementById("grays").offsetWidth / 2);
  46.                 grays[1] = (document.getElementById("id" + i).offsetTop + (document.getElementById("id" + i).offsetHeight / 2)) - (document.getElementById("grays").offsetHeight / 2);
  47.                
  48.             }
  49.         }
  50.         $('#grays').animate({left:grays[0], top:grays[1]});
  51.     });
  52. });
  53. </script>
  54. </head>
  55. <body id="corpo">
  56. </body>
  57. </html>
Advertisement
Add Comment
Please, Sign In to add comment