Dom Panels

Otra forma de presentar nuestras imágenes, ocupando poquito espacio. Y fácil de insertar. Podéis verlo en marcha en mi blog de pruebas Test-Imagen
Test
(¡¡OJO!!: Se lleva muy mal este script con casi todos los demás... es bastante "obstructivo"... por eso he preferido quitarlo de mis blogs "funcionales" y dejarlo sólo como muestra en un blog de ORUEBAS.

.- Forma de hacerlo:

1. .- Un CSS:
   

   
   #screen {
   
   position: absolute;
   
   
   
   width: 45%;
   
   height: 30%;
   
   background: #fff;
   
   overflow: hidden;
   
   }
   
   .panel {
   
   position: relative;
   
   float: left;
   
   width: 21%;
   
   height: 30%;
   
   margin: 1%;
   
   overflow: hidden;
   
   }
   
   .imgPanel {
   
   position: absolute;
   
   border: none;
   
   text-decoration: none;
   
   }
   



2. .- Un script:
   

   
   <script type='text/javascript'>
   
   var xm = 0;
   
   var ym = 0;
   
   document.onmousemove = function(e){
   
   if (window.event) e=window.event;
   
   xm = e.clientX;
   
   ym = e.clientY;
   
   }
   
   var panel = {
   
   speed : .006,
   
   t : 0,
   
   O : [],
   
   over : false,
   
   run : function() {
   
   panel.t += panel.speed;
   
   for (var i = 0, o; o = panel.O[i]; i++)
   
   o.anim(i + panel.t);
   
   },
   
   init : function(){
   
   for (var i = 0, o; o = document.images[i]; i++){
   
   if (o.className.indexOf(&#39;panel&#39;)&gt;= 0) {
   
   if(o.parentNode.href != undefined) {
   
   var div = document.createElement(&quot;a&quot;);
   
   div.href = o.parentNode.href;
   
   } else {
   
   var div = document.createElement(&quot;div&quot;);
   
   }
   
   div.className = &#39;panel&#39;;
   
   var img = document.createElement(&quot;img&quot;);
   
   img.src = o.src;
   
   img.className = &#39;imgPanel&#39;;
   
   o.parentNode.replaceChild(div,o);
   
   div.appendChild(img);
   
   div.ims = img.style;
   
   div.iw = img.width;
   
   div.ih = img.height;
   
   div.cx = -div.iw / 2;
   
   div.cy = -div.ih / 2;
   
   div.anim = function(t) {
   
   nw = this.offsetWidth;
   
   nh = this.offsetHeight;
   
   if (panel.over == this){
   
   for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
   
   var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
   
   var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
   
   if (Math.abs(xm-nx-nw * .5)&gt; nw || Math.abs(ym-ny-nh * .5)&gt; nw ) panel.over = false;
   
   } else {
   
   var mx = (this.iw - nw) * .5;
   
   var my = (this.ih - nh) * .5;
   
   var x = -mx * (1 + Math.cos(t * 1.2));
   
   var y = -my * (1 + Math.sin(t));
   
   }
   
   this.cx += (x - this.cx) * .1;
   
   this.cy += (y - this.cy) * .1;
   
   this.ims.left = Math.round(this.cx) + &#39;px&#39;;
   
   this.ims.top = Math.round(this.cy) + &#39;px&#39;;
   
   }
   
   div.onmouseover = function()
   
   {
   
   panel.over = this;
   
   }
   
   this.O.push(div);
   
   }
   
   }
   
   setInterval(panel.run, 32);
   
   }
   
   }
   
   onload = function ()
   
   {
   
   panel.init();
   
   }
   
   </script>
   



3. .- Y el HTML:
   

   
   <div id='screen'>
   
   
   
   <img alt='mieve' class='panel' src='http://...jpg'/> <img alt='tigre' class='panel' src='http://...jpg'/>
   
   <img alt='pantera' class='panel' src='http://...jpg'/> <img alt='jaguar' class='panel' src='http://...jpg'/>
   
   
   
   </div>
   

Para variar, podéis cambiar, dentro del CSS, lo que queráis: ancho, alto, color de fondo. etc...

Vía: Xyberneticos