Que nadie se crea que esto tiene alguna utilidad práctica inmediata, es para pasar el rato, un experimento que usa jQuery y que no tiene mayores pretensiones. Creado por kelvinluck.com/.
¿Será que todo tiene que tener alguna utilidad?
¿Será que todo tiene que tener alguna utilidad?
<style>
/* este es el formulario superior */
#boing-container { text-align: center; }
#boing-container input {
background: #000;
border: 2px solid #444;
border-radius: 4px;
color: #CCC;
padding: 5px;
}
#boing-container input[type=text] {
text-align: center;
width: 400px;
}
#boing-container input[type=submit]{
background-image: -moz-linear-gradient(#888, #222);
background-image: -webkit-linear-gradient(#888, #222);
background-image: -o-linear-gradient(#888, #222);
background-image: -ms-linear-gradient(#888, #222);
background-image: linear-gradient(#888, #222);
cursor: pointer;
width: 80px;
}
#boing-container input[type=submit].loading{visibility:hidden;}
.error{
color: #F00;
font-style: italic;
margin: 5px 0;
}
/* este es el contenedor con la imagen y el efecto */
#picHolder{
height: 200px;
margin: 50px auto;
position: relative;
width: 200px;
}
.block {position: absolute;}
.default { /* los cuadraditos iniciales */
border: 1px solid #FFF;
height: 18px;
width: 18px;
}
</style>
<script>
// recordar que se debe tener jQuery cargado */
// boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/
$(function(){
var divs;
var $picHolder = $('#picHolder');
function initGrid(w, h, backgroundImage){
$picHolder.empty();
$picHolder.css({'width' : w,'height' : h});
w /= 10; h /= 10;
divs = [];
for (var i=0; i<10; i++) {
var t = i * h; var l = 0;
for (var j=0; j<10; j++){
var css = {top:t, left:l};
if (backgroundImage){
css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
css.width = w; css.height = h;
}
var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
d.data('t', t); d.data('l', l);
divs.push(d);
$picHolder.append(d);
l+=w;
}
}
}
initGrid(200, 200);
var mouseX = 1000; var mouseY = 1000;
$(document).bind(
'mousemove',
function(e){
var po = $picHolder.offset();
mouseX = e.pageX - po.left; mouseY = e.pageY - po.top;
}
);
var force = 1500;
setInterval(
function(){
var po = $picHolder.offset();
for (var i=0; i<divs.length; i++) {
var $d = divs[i];
var o = $d.offset();
var x = o.left - po.left; var y = o.top - po.top;
var xDif = mouseX - x; var yDif = mouseY - y;
var distance = Math.sqrt(xDif*xDif+yDif*yDif);
var tempX = x - (force/distance)*(xDif/distance); var tempY = y - (force/distance)*(yDif/distance);
$d.css('left', ($d.data('l') - x)/2+tempX); $d.css('top', ($d.data('t') - y)/2+tempY);
}
},
100
);
$imageUrl = $('#imageUrl');
$imageUrl.bind(
'focus',
function(e){if ($imageUrl.val() == 'direccion url de una imagen y click en cargar ...') {$imageUrl.val('');}}
).bind(
'blur',
function(e){if ($imageUrl.val() == '') {$imageUrl.val('direccion url de una imagen y click en cargar ...');}}
);
var $submitButton = $('#loadImage');
$submitButton.bind(
'click',
function(e){
$submitButton.addClass('loading');
var i = new Image();
$(i).bind(
'load',
function(e){
$submitButton.removeClass('loading');
var w = i.width; var h = i.height;
initGrid(w, h, $imageUrl.val());
}
).bind(
'error',
function(){
$submitButton.removeClass('loading');
var $errorMessage = $('<div class="error">la URL de la imagen no es valida</div>');
$submitButton.after($errorMessage);
$errorMessage.hide().slideDown('normal').animate(
{'opacity': .9}, 2000
).slideUp(
'normal', function(){$errorMessage.remove();}
);
initGrid(20, 20);
}
);
i.src = $imageUrl.val() || 'theresnoimagebythatname!';
return false;
}
);
}
);
</script>
<div id="boing-container">
<form>
<input type="text" id="imageUrl" value="direccion url de una imagen y click en cargar ..." />
<input type="submit" id="loadImage" value="cargar" />
</form>
</div>
<div id="picHolder"></div>
