Ojos que persiguen y observan al cursor de tu blog

En esta entrada quiero mostrarte una derivación del truco 'Imagen que sigue al cursor' pero esta vez, con animación.

Se trata de incluir en el blog dos ojitos que persiguen al cursor y que su pupila parece estar observando en todo momento los movimientos que realizas con el ratón.

Puedes comprobar el resultado accediendo a este blog de pruebas.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<script type="text/javascript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var balcnimg1 = new Image();
balcnimg1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjvzNhmrmfNWuUMVMK7nBbypM0spogdPTbmtggNUoGvRlHJmpUWrNakp53l9WX0aEteVyeuZciUbB3w70H4iIhvJf-G6JISBKjUqrXoMwb_3BjaRSdZp7d8UalKcWIePQZ7WmAOIHLUwk/s320/blojo2.gif";
var balcnimg2 = new Image();
balcnimg2.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjim4YXeej9e5bXfmeyT1UhwP3-3DXOoTVG_g5NmQ7A0Dj9Aps0U0pnlflJXnW4thUFvbzgHZkPa5UMqF1-RSslCLFH8xppO4SqvWXoyLJIlHvCHruqAlOk3X_Q4J3_lyp3AJTeu9x_ltY9/s320/blojo1.gif";
var balcnimg3 = document.images.length;
if ( document.getElementById("pic"+balcnimg3) ||
document.getElementById("balcnad"+balcnimg3) ||
document.getElementById("balcnad2"+balcnimg3)) balcnimg3++;

document.write('<img id="blcnvv'+balcnimg3+'" src="'+balcnimg1.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'
+'<img id="balcnad'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="balcnad2'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');

document.write('<a style="font-size:12px;"href="http://goo.gl/p0SVq" target="_blank"><img src="http://goo.gl/5ZST"/></a>');
var h,w,r,balcneedimg,blcnimgmin,blcnimgmin2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "33");
var domSy = (typeof window.pageYOffset == "33");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "33" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function blcnff(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;}
else{
my = e.clientY - msy;
mx = e.clientX;
}
}
function blcnsgg(){
var sy = scrl(0);
var sx = scrl(1);
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
var c1y = chy+17;
var c1x = chx+17;
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
balcneedimg.top = chy+sy+pix;
balcneedimg.left = chx+sx+pix;
blcnimgmin.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
blcnimgmin.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
blcnimgmin2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
blcnimgmin2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function balcnimg4(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
blcnsgg();
setTimeout(balcnimg4,30);
}

function blcndde(){
balcneedimg = document.getElementById("blcnvv"+balcnimg3).style;
blcnimgmin = document.getElementById("balcnad"+balcnimg3).style;
blcnimgmin2 = document.getElementById("balcnad2"+balcnimg3).style;
blcnff();
balcnimg4();
}
if (window.addEventListener){
window.addEventListener("resize",blcnff,false);
window.addEventListener("load",blcndde,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",blcnff);
window.attachEvent("onload",blcndde);
document.attachEvent("balcnkk",mouse);
}
})();
}
</script>

Guarda el gadget y habrás terminado.