Javascript Eyefollow

[CanbiZ]

Moin Moin,

wie kann man folgendes kürzer schreiben, entweder mit Javascript oder Jquery? ich weiß, dass es geht aber nicht wie.

Hab schon einmal eins gesehen mit unter 30 Zeilen..

Hier der Code:

jQuery.fn.eyes = function(options)
{

options = $.extend({
padding: 0,
radius: 'natural',
onHover: 'follow',
position: 'center',
trigger: window,
triggerOut: undefined,
triggerOutSpeed: 1000
}, options);

var padding = parseInt(options.padding, 10);

this.each(function(index, Eye1)
{
var $Eye1 = $(Eye1),
$eye = $Eye1.parent();

$(Eye1).css('position', 'absolute').parent().css('position', 'relative');

var Eye1W = $Eye1.outerWidth(),
Eye1H = $Eye1.outerHeight(),
eyeW = $eye.width(),
eyeH = $eye.height(),
defX = eyeW / 2 - Eye1W / 2,
defY = eyeH / 2 - Eye1H / 2;

if (options.radius == 'circular' && eyeW > eyeH)
{
eyeW = eyeH
}
else if (options.radius == 'circular')
{
eyeH = eyeW
}

$(Eye1).css("left", defX + "px").css("top", defY + "px");

var offset = $Eye1.offset(),
offX = offset.left + Eye1W / 2,
offY = offset.top + Eye1H / 2,
position = {
top:
{
degree: 90
},
bottom:
{
degree: -90
},
left:
{
degree: 180
},
right:
{
degree: 0
},
topRight:
{
degree: 45
},
topLeft:
{
degree: 135
},
bottomRight:
{
degree: -45
},
bottomLeft:{
degree: -135
}
};

var offsetReset = function()
{
offset = $Eye1.offset();
offX = offset.left + Eye1W / 2;
offY = offset.top + Eye1H / 2;
};

if (options.position.x)
{
$Eye1.css("left", defX - parseInt(options.position.x, 10) + "px").css("top", defY - parseInt(options.position.y, 10) + "px")
}
else if (options.position.degree !== undefined)
{
var deg = options.position.degree * Math.PI / -180;
$Eye1.css("left", defX + Math.cos(deg) * (eyeW / 2 - Eye1W / 2 - padding) + "px").css("top", defY + Math.sin(deg) * (eyeH / 2 - Eye1H / 2 - padding) + "px")
}
else if (options.position == "center")
{
$Eye1.css("left", defX + "px").css("top", defY + "px")
}
else
{
var deg2 = position[options.position].degree * Math.PI / -180;
$Eye1.css("left", defX + Math.cos(deg2) * (eyeW / 2 - Eye1W / 2 - padding) + "px").css("top", defY + Math.sin(deg2) * (eyeH / 2 - Eye1H / 2 - padding) + "px")
}

var eyesFollow = function(e)
{
$Eye1.stop().clearQueue();

offsetReset();

var degree = Math.atan(( e.pageY - offY) / ( e.pageX - offX)),
direction = (offX >= e.pageX) ? -1 : 1,
newX = Math.cos(degree) * (eyeW / 2 - Eye1W / 2 - padding) * direction,
newY = Math.sin(degree) * (eyeH / 2 - Eye1H / 2 - padding) * direction,
radius = Math.sqrt(Math.pow(newX, 2) + Math.pow(newY, 2)),
distance = Math.sqrt(Math.pow(e.pageY - offY, 2) + Math.pow(e.pageX - offX, 2));

if (radius > distance && options.onHover.toLowerCase() != 'nofollow')
{
$Eye1.css("left", ( e.pageX - offX + defX) + "px").css("top", ( e.pageY - offY + defY) + "px")
}
else
{
$Eye1.css("left", defX + newX + "px").css("top", defY + newY + "px")
}
},
eyesReset = function(e)
{
if (options.triggerOut != undefined)
{
if (options.triggerOut.x)
{
$Eye1.animate({
left: defX - parseInt(options.triggerOut.x, 10) + "px",
top: defY - parseInt(options.triggerOut.y, 10) + "px"
}, options.triggerOutSpeed);
}
else if (options.triggerOut.degree !== undefined)
{
var deg = options.triggerOut.degree * Math.PI / -180;
$Eye1.animate({
left: defX + Math.cos(deg) * (eyeW / 2 - Eye1W / 2 - padding) + "px",
top: defY + Math.sin(deg) * (eyeH / 2 - Eye1H / 2 - padding) + "px"
}, options.triggerOutSpeed)
}
else if (options.triggerOut == "center")
{
$Eye1.animate({
left: defX + "px",
top: defY + "px"
}, options.triggerOutSpeed);
}
else
{
var deg2 = position[options.triggerOut].degree * Math.PI / -180;
$Eye1.animate({
left: defX + Math.cos(deg2) * (eyeW / 2 - Eye1W / 2 - padding) + "px",
top: defY + Math.sin(deg2) * (eyeH / 2 - Eye1H / 2 - padding) + "px"
}, options.triggerOutSpeed);
}
}
};

$(options.trigger).mousemove(eyesFollow).mouseleave(eyesReset);

$(window).resize( offsetReset );

});
};

[PC Jones]

jQuery.fn.eyes=function(e){e=$.extend({padding:0,radius:"natural",onHover:"follow",position:"center",trigger:window,triggerOut:undefined,triggerOutSpeed:1e3},e);var t=parseInt(e.padding,10);this.each(function(n,r){var i=$(r),s=i.parent();$(r).css("position","absolute").parent().css("position","relative");var o=i.outerWidth(),u=i.outerHeight(),a=s.width(),f=s.height(),l=a/2-o/2,c=f/2-u/2;if(e.radius=="circular"&&a>f){a=f}else if(e.radius=="circular"){f=a}$(r).css("left",l+"px").css("top",c+"px");var h=i.offset(),p=h.left+o/2,d=h.top+u/2,v={top:{degree:90},bottom:{degree:-90},left:{degree:180},right:{degree:0},topRight:{degree:45},topLeft:{degree:135},bottomRight:{degree:-45},bottomLeft:{degree:-135}};var m=function(){h=i.offset();p=h.left+o/2;d=h.top+u/2};if(e.position.x){i.css("left",l-parseInt(e.position.x,10)+"px").css("top",c-parseInt(e.position.y,10)+"px")}else if(e.position.degree!==undefined){var g=e.position.degree*Math.PI/-180;i.css("left",l+Math.cos(g)*(a/2-o/2-t)+"px").css("top",c+Math.sin(g)*(f/2-u/2-t)+"px")}else if(e.position=="center"){i.css("left",l+"px").css("top",c+"px")}else{var y=v[e.position].degree*Math.PI/-180;i.css("left",l+Math.cos(y)*(a/2-o/2-t)+"px").css("top",c+Math.sin(y)*(f/2-u/2-t)+"px")}var b=function(n){i.stop().clearQueue();m();var r=Math.atan((n.pageY-d)/(n.pageX-p)),s=p>=n.pageX?-1:1,h=Math.cos(r)*(a/2-o/2-t)*s,v=Math.sin(r)*(f/2-u/2-t)*s,g=Math.sqrt(Math.pow(h,2)+Math.pow(v,2)),y=Math.sqrt(Math.pow(n.pageY-d,2)+Math.pow(n.pageX-p,2));if(g>y&&e.onHover.toLowerCase()!="nofollow"){i.css("left",n.pageX-p+l+"px").css("top",n.pageY-d+c+"px")}else{i.css("left",l+h+"px").css("top",c+v+"px")}},w=function(n){if(e.triggerOut!=undefined){if(e.triggerOut.x){i.animate({left:l-parseInt(e.triggerOut.x,10)+"px",top:c-parseInt(e.triggerOut.y,10)+"px"},e.triggerOutSpeed)}else if(e.triggerOut.degree!==undefined){var r=e.triggerOut.degree*Math.PI/-180;i.animate({left:l+Math.cos(r)*(a/2-o/2-t)+"px",top:c+Math.sin(r)*(f/2-u/2-t)+"px"},e.triggerOutSpeed)}else if(e.triggerOut=="center"){i.animate({left:l+"px",top:c+"px"},e.triggerOutSpeed)}else{var s=v[e.triggerOut].degree*Math.PI/-180;i.animate({left:l+Math.cos(s)*(a/2-o/2-t)+"px",top:c+Math.sin(s)*(f/2-u/2-t)+"px"},e.triggerOutSpeed)}}};$(e.trigger).mousemove(b).mouseleave(w);$(window).resize(m)})}

So?

[CanbiZ]

Originally Posted by PC Jones

jQuery.fn.eyes=function(e){e=$.extend({padding:0,radius:"natural",onHover:"follow",position:"center",trigger:window,triggerOut:undefined,triggerOutSpeed:1e3},e);var t=parseInt(e.padding,10);this.each(function(n,r){var i=$(r),s=i.parent();$(r).css("position","absolute").parent().css("position","relative");var o=i.outerWidth(),u=i.outerHeight(),a=s.width(),f=s.height(),l=a/2-o/2,c=f/2-u/2;if(e.radius=="circular"&&a>f){a=f}else if(e.radius=="circular"){f=a}$(r).css("left",l+"px").css("top",c+"px");var h=i.offset(),p=h.left+o/2,d=h.top+u/2,v={top:{degree:90},bottom:{degree:-90},left:{degree:180},right:{degree:0},topRight:{degree:45},topLeft:{degree:135},bottomRight:{degree:-45},bottomLeft:{degree:-135}};var m=function(){h=i.offset();p=h.left+o/2;d=h.top+u/2};if(e.position.x){i.css("left",l-parseInt(e.position.x,10)+"px").css("top",c-parseInt(e.position.y,10)+"px")}else if(e.position.degree!==undefined){var g=e.position.degree*Math.PI/-180;i.css("left",l+Math.cos(g)*(a/2-o/2-t)+"px").css("top",c+Math.sin(g)*(f/2-u/2-t)+"px")}else if(e.position=="center"){i.css("left",l+"px").css("top",c+"px")}else{var y=v[e.position].degree*Math.PI/-180;i.css("left",l+Math.cos(y)*(a/2-o/2-t)+"px").css("top",c+Math.sin(y)*(f/2-u/2-t)+"px")}var b=function(n){i.stop().clearQueue();m();var r=Math.atan((n.pageY-d)/(n.pageX-p)),s=p>=n.pageX?-1:1,h=Math.cos(r)*(a/2-o/2-t)*s,v=Math.sin(r)*(f/2-u/2-t)*s,g=Math.sqrt(Math.pow(h,2)+Math.pow(v,2)),y=Math.sqrt(Math.pow(n.pageY-d,2)+Math.pow(n.pageX-p,2));if(g>y&&e.onHover.toLowerCase()!="nofollow"){i.css("left",n.pageX-p+l+"px").css("top",n.pageY-d+c+"px")}else{i.css("left",l+h+"px").css("top",c+v+"px")}},w=function(n){if(e.triggerOut!=undefined){if(e.triggerOut.x){i.animate({left:l-parseInt(e.triggerOut.x,10)+"px",top:c-parseInt(e.triggerOut.y,10)+"px"},e.triggerOutSpeed)}else if(e.triggerOut.degree!==undefined){var r=e.triggerOut.degree*Math.PI/-180;i.animate({left:l+Math.cos(r)*(a/2-o/2-t)+"px",top:c+Math.sin(r)*(f/2-u/2-t)+"px"},e.triggerOutSpeed)}else if(e.triggerOut=="center"){i.animate({left:l+"px",top:c+"px"},e.triggerOutSpeed)}else{var s=v[e.triggerOut].degree*Math.PI/-180;i.animate({left:l+Math.cos(s)*(a/2-o/2-t)+"px",top:c+Math.sin(s)*(f/2-u/2-t)+"px"},e.triggerOutSpeed)}}};$(e.trigger).mousemove(b).mouseleave(w);$(window).resize(m)})}

So?

Moment ich probiere es


funktioniert zwar, ist wirklich aber sehr viel noch.. dachte eher so hier...

 Spoiler

jQuery.fn.eyes = function(options)
{
var padding = parseInt(options.padding, 10);

this.each(function(index, Eye1)
{
var $Eye1 = $(Eye1),
$eye = $Eye1.parent();

$Eye1.css("left", defX + newX + "px").css("top", defY + newY + "px")
}
},
eyesReset = function(e)
{
if (options.triggerOut != undefined)
{
if (options.triggerOut.x)
{
$Eye1.animate({
left: defX - parseInt(options.triggerOut.x, 10) + "px",
top: defY - parseInt(options.triggerOut.y, 10) + "px"
}, options.triggerOutSpeed);
}
else if (options.triggerOut.degree !== undefined)
{
var deg = options.triggerOut.degree * Math.PI / -180;
$Eye1.animate({
left: defX + Math.cos(deg) * (eyeW / 2 - Eye1W / 2 - padding) + "px",
top: defY + Math.sin(deg) * (eyeH / 2 - Eye1H / 2 - padding) + "px"
}, options.triggerOutSpeed)
}
else if (options.triggerOut == "center")
{
$Eye1.animate({
left: defX + "px",
top: defY + "px"
}, options.triggerOutSpeed);
}
else
{
var deg2 = position[options.triggerOut].degree * Math.PI / -180;
$Eye1.animate({
left: defX + Math.cos(deg2) * (eyeW / 2 - Eye1W / 2 - padding) + "px",
top: defY + Math.sin(deg2) * (eyeH / 2 - Eye1H / 2 - padding) + "px"
}, options.triggerOutSpeed);
}
}
};

$(options.trigger).mousemove(eyesFollow).mouseleave(eyesReset);

$(window).resize( offsetReset );

});
};

nur ein bisschen kürzer für eine externe .js, der funktioniert aber leider nicht ;/ den hab ich gekürzt.