Foros del Web » Programando para Internet » Jquery »

consulta efecto volando imagen con jquery

 Estas en el tema de consulta efecto volando imagen con jquery en el foro de Jquery en Foros del Web. Hola que tal muy buenos dias a todos!!, pido mil disculpas si este post no va aquí, soy realmente nuevo y estoy un poco perdido, ...
  #1 (permalink)  
Antiguo 31/10/2011, 10:24
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 1
Exclamación consulta efecto volando imagen con jquery
Hola que tal muy buenos dias a todos!!, pido mil disculpas si este post no va aquí, soy realmente nuevo y estoy un poco perdido, y siendo así pediría a los moderadores muevan mi tema correspondiente ya que sé la importancia de tener todo en orden dentro de la comunidad, pues bien ahora paso a mi problema:

Estoy trabajando con JavaEE, tecnología JSP, Servlets y todo eso para un carrito de compras, sé un poco de Javascript, mucho de HTML y Java, pero lo que es JQUERY apesar de ser JS tienen sintaxis diferente y está mucho mas enfocado al dinamismo con objectos y elementos, por eso les pido su ayuda en lo siguiente:

junto con java y html ciclo un div "hijo" que esta dentro de un div "papa" que está fijo, cada div "hijo" contiene datos de un producto que rescato de una BD, pero tengo otros subdivs, en uno de esos divs coloco lo que e sla imagen del producto, ahora bien, en cada div hijo tengo enlaces como "añadir al carrito" y "ver" con etiquetas a y propiedad href, quiero que al dar clic en "añadir al carrito de compras" la imagen que corresponde se diriga a otro div en especifico que tengo en la pagina, con elefecto de que se haga mas chico mientras se mueve y la opacidad disminuyendo, ahora bien, buscando en paginas encontre un codigo al que le modifique lo poco que le entendi, dejo todo lo que ocupo para que me puedan hechar una ayudadita porfavor.


1. - Lo que veo es que solo una vez ocurre la animación, es decir solo admite 1 click, yo quiero "n" numero de clicks, no logro ver en donde se le debe mover para que me permita lllamar la funcion y que se ejecute correctamente no importando el numero de click que yo haga para llamar la función.

2.- No logro saber como hacer que todas las imagenes se vayan al mismo posicionamiento del div a donde quiero que caigan.

3.- no se a donde debo agregarle para que en cuanto termine la animacion ejecute una fiocn javascript normal.

dejo codigo de todo:

Este es flyoff.js

uso el jquery-1.2.6.min.js

y aqui mi codigo JSP:

Código: 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript"><%@include file="jquery-1.2.6.min.js" %></script>
        <script type="text/javascript"><%@include file="flyoff.js" %></script>
        <style>
            
            #imagenes{
                position: absolute;
                margin-left: 50px;
                margin-top: 50px;
                z-index: 1;
                
            }
            
            #imagenes2{
                position: absolute;
                margin-left: 50px;
                margin-top: 50px;
            }
            
            #carrito{
                position: absolute;
                margin-left: 60%;
                margin-top: 80px;
                border-color: #000;
                border-width: 3px;
                width: 80px;
                height: 80px;
                background-color: #000;
                
            }
        </style>
    </head>
    <body>
        <div id="imagenes">
            
                <img src="imagenes/bb-bold9900.png"><br/>
                <img src="imagenes/bb-torch.png"><br/>
                <img src="imagenes/bbplaybook.png">
        </div>
        <div id="imagenes2">
            
                <img src="imagenes/bb-bold9900.png"><br/>
                <img src="imagenes/bb-torch.png"><br/>
                <img src="imagenes/bbplaybook.png">
        </div>
                
        </div>
        <div id="carrito"></div>
        <script>
        $('img','#imagenes').click(function(){
            $(this).flyOffPage({
              /*  retainSpace: {
                    height: 0,
                    width: 0,
                    margin: 0,
                    top:0
                },*/
                tween: {
                    opacity: -1,
                    marginTop: 80,
                    marginLeft: 60
                }
            });
            return false;
        });
        
  </script>
    
    </body>
</html>
Nota: veran que tengo duplicado un div con las mismas imagenes eso es porque el codigo de la animacion hace que desaparezcan las imagenes y yo quiero mantenerlas fijas y no sé usar algo así como clonacion!!
  #2 (permalink)  
Antiguo 31/10/2011, 10:24
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: consulta efecto volando imagen con jquery
aqui dejo el otro js que hace lo del efecto:

Código Javascript: 
Ver original
  1. [HIGHLIGHT="Javascript"]
  2. (function($,W,D){
  3.     
  4.     // Define all possible exit positions:
  5.     var exitPositions = {
  6.     /*    top: function(el) {
  7.             return {
  8.                 top: 0 - el.height(),
  9.                 left: el.offset().left
  10.             };
  11.         },
  12.         topLeft: function(el) {
  13.             return {
  14.                 top: 0 - el.height(),
  15.                 left: 0 - (el.width()/2)
  16.             };
  17.         },*/
  18.         topRight: function(el) {
  19.             return {
  20.                 top: 0 - el.height(),
  21.                 left: $(W).width() + (el.width()/2)
  22.             };
  23.         }/*,
  24.         left: function(el) {
  25.             return {
  26.                 top: el.offset().top,
  27.                 left: 0 - el.width()
  28.             };
  29.         },
  30.         right: function(el) {
  31.             return {
  32.                 top: el.offset().top,
  33.                 left: $(W).width() + el.width()
  34.             };
  35.         },
  36.         btmLeft: function(el) {
  37.             return {
  38.                 top: getWindowHeight() + el.height(),
  39.                 left: 0 - (el.width()/2)
  40.             };
  41.         },
  42.         btmRight: function(el) {
  43.             return {
  44.                 top: getWindowHeight() + el.height(),
  45.                 left: getWindowHeight() + (el.width()/2)
  46.             };
  47.         },
  48.         btm: function(el) {
  49.             return {
  50.                 top: getWindowHeight(),
  51.                 left: el.offset().left
  52.             };
  53.         }*/
  54.     };
  55.     
  56.     function getWindowHeight() {
  57.         return W.innerHeight || $(window).height();   
  58.     }
  59.     
  60.     function randDirection() {
  61.         
  62.         var directions = [],
  63.             count = 0;
  64.         
  65.         // Loop through available exit positions:
  66.         for (var i in exitPositions) {
  67.             // Push property name onto new array:
  68.             directions.push(i);
  69.             count++;
  70.         }
  71.         
  72.         // Return random directions property (corresponds to exitPositions properties):
  73.         return directions[ parseInt(Math.random() * count, 10) ];
  74.     
  75.     }
  76.     
  77.     function prepareOverflow() {
  78.         
  79.         // The various overflow settings will be set to hidden,
  80.         // but only if it does not conflict with the current document:
  81.         var oX = $(D).width() <= $(W).width(),
  82.             oY = $(D).height() <= $(W).height(),
  83.             oR = oX && oY;
  84.         oX && $('body').css('overflow-x','hidden');
  85.         oY && $('body').css('overflow-y','hidden');
  86.         oR && $('body').css('overflow','hidden');
  87.         
  88.     }
  89.     
  90.     function flyElement(s) {
  91.         
  92.         // Main functionality of plugin:
  93.         
  94.         // Create shortcut to element:
  95.         var el = $(this),
  96.         
  97.             // Handle random direction:
  98.             direction = s.direction.toLowerCase() === 'random' ? randDirection() : s.direction,
  99.         
  100.             // New objext: Tweens - All tweens, including user-defined ones and ours:
  101.             // (Gives our tweens precedence):
  102.             tweens = $.extend(s.tween, exitPositions[direction](el)),
  103.             
  104.             // Define all properties associated with layout/position:
  105.             positionProps = 'position,left,top,bottom,right,width,height,paddingTop,paddingRight,paddingBottom,paddingLeft,marginTop,marginRight,marginBottom,marginLeft,zIndex,overflow,clip,display',
  106.             // New element: clone of original (remove unique identifier):
  107.             // (Must re-apply all layout styles because the ID may have been CSS hook):
  108.             clone = $(el.clone())
  109.                         .removeAttr('id')
  110.                         .attr('id', 'replaced-element-' + (+new Date()))
  111.                         .css((function(){
  112.                             // Loop through each position/layout property
  113.                             // and return object containing all:
  114.                             var props =  positionProps.split(','),
  115.                                 length = props.length,d
  116.                                 styles = {};
  117.                             while(length--) { styles[props[length]] = el.css(props[length]); }
  118.                             return styles;
  119.                         })());
  120.         
  121.         // Prepare document overflows:
  122.         prepareOverflow();
  123.  
  124.         $(el)
  125.             
  126.             // Style new element:
  127.             .css({
  128.                 left: tweens.left ? el.offset().left : null,
  129.                 top: tweens.top ? el.offset().top : null,
  130.                 position: 'absolute',
  131.                 zIndex: 999,
  132.                 width: el.outerWidth(),
  133.                 height: el.outerHeight()
  134.             })
  135.             
  136.             // Animate using collective 'tweens' object:
  137.             .animate(tweens, s.duration, function(){
  138.                 // On comepletion, remove the animated element:
  139.                 el.remove(); 
  140.             })
  141.             
  142.             .filter(function(){
  143.                 // Filter:
  144.                 // (will only continue with chain if user set 'retainSpace' to true)
  145.                 return !!s.retainSpace;
  146.             })
  147.             
  148.             // Insert clone before original element: (make clone invisible)
  149.             .before($(clone).css('opacity',0));
  150.  
  151.             if (s.retainSpace && typeof s.retainSpace === 'object') {
  152.                 $(clone).animate(s.retainSpace, s.duration, function(){
  153.                     $(this).remove();
  154.                 });
  155.             }
  156.         
  157.     }
  158.     
  159.     // Expose functionality to jQuery namespace:
  160.     $.fn.flyOffPage = function(userDefinedSettings) {
  161.         
  162.         // Define settings
  163.         var s = $.extend({
  164.             direction: 'random',
  165.             tween: {},
  166.             retainSpace: true,
  167.             duration: 1800
  168.         }, userDefinedSettings);
  169.         
  170.         // Initiate:
  171.         return this.each(function(){
  172.             flyElement.call(this,s);
  173.         });
  174.         
  175.     };
  176.     
  177. })(jQuery,window,document);
[/HIGHLIGHT]

Etiquetas: efecto, funcion, html, imagenes, js, volando
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:07.