Script hiệu ứng lan tỏa jOrbital độc đáo

jOrbital rất độc đáo & ấn tượng!

Code có sử dụng tệp jQuery.js phiên bản 1.3.2. Hãy gỡ bỏ nếu website của bạn đã có phiên bản cao hơn.

Xem thử

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
(function($) {

var config = {
disableIE6 : true,
disableIE7 : true
};

var defaults = {
selector : '.orbit',
radius: 2.0,
inDuration: 400,
outDuration: 400,
mousePropagation: true
};

/* common functions ----------------------------------------------------------*/

function echo ( text ) {
$("body").append("<p>"+text+"</p>");
}

function isArray(obj) {
return obj.constructor == Array;
}

function vecLength( vec ) {
return Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) );
}

function vecClock( V ) {

var SV = { x:0, y:1 }

var angle = vecAngle( SV, V );

if( V.x >= 0 ){ angle = Math.PI - angle; }
if( V.x < 0 ){ angle = Math.PI + angle; }

return angle;

}

function vecAngle( V1, V2 ) {

var param = (V1.x*V2.x + V1.y*V2.y) / ( vecLength(V1) * vecLength(V2) );
if( (param > 1) || (param<-1)) param = 0;
angle = Math.acos( param );
return angle;
}

function distance(x1, y1, x2, y2 ){

var dx = x1 - x2;
var dy = y1 - y2;

return Math.sqrt(dx*dx + dy*dy);
}

function maxDimension( elements ) {

var max_dimension = 0;

elements.each( function( i, planet ){

$planet = $(planet);

var width = $planet.outerWidth();
var height = $planet.outerHeight();

if( width > max_dimension ) max_dimension = width;
if( height > max_dimension ) max_dimension = height;

});

return max_dimension;
}

function setup ( $o, effect ){

if( $.fx.off ) return false;

var data = $.extend( {}, defaults, effect );

if( data.inDuration == 0 ) data.inDuration = 1;

if( !$o.parent().hasClass( 'orbit' ) ) { $o.css({ position:"relative" }); }
else { $o.css({ position:"absolute" }); }

data.planets = $o.children( data.selector ).children().size();

$o.children( data.selector ).show().children().show();

data.r = maxDimension( $o.children( data.selector ).children() ) * data.radius;


// yesh, this meansh - chrome sometimes
if( data.r == 0 )
data.r = maxDimension( $o );

var parent_zIndex = parseInt($o.parent().parent().css('z-index'));
if( parent_zIndex ) {
var zIndex = parent_zIndex - 1;
}
else var zIndex = 0;
zIndex = 0;

if( !$.browser.msie ) {

$o.children( data.selector ).hide().css({
"z-index": 5,
'position': 'absolute',
'left': -data.r + $o.outerWidth() / 2,
'top': -data.r + $o.outerHeight() / 2,
'width': data.r * 2,
'height': data.r * 2
});

} else {

$o.children( data.selector ).hide().css({
'position': 'absolute',
'left': -data.r + $o.outerWidth() / 2,
'top': -data.r + $o.outerHeight() / 2,
'width': data.r * 2,
'height': data.r * 2
});

}



data.circleRange = [ 0, Math.PI * 2 ];

data.step = ( data.circleRange[1] - data.circleRange[0] ) / data.planets;

$o.addClass("jOrbital");

$o.children( data.selector ).children().each( function( i, planet ){

var $planet = $(planet);
$planet.stop().css({
left: data.r + Math.cos( - Math.PI / 2 + data.step * i ) * ( data.r * 0.5 ) - $planet.outerWidth() / 2,
top: data.r + Math.sin( - Math.PI / 2 + data.step * i ) * ( data.r * 0.5 ) - $planet.outerHeight() / 2,
position: 'absolute'
});

});

var offset = $o.offset();


/* Hover ---------------------------------------------------------------*/

$o.mouseenter( function(){

$this = $(this);

var data = $this.data("jOrbital");

if( data.mousePropagation )
if( $this.hasClass('animated') ) return false;

var pos = $this.offset();

var r = $o.outerWidth();

$this.find('jOrbital').hide();

$this.parent().children().css({'z-index':1});

if( data.r == 0 ){
$this.children( data.selector ).show();
data.r = maxDimension( $this.children( data.selector ).children() ) * data.radius;
$this.children( data.selector ).hide();
}


if( $this.parent().parent().hasClass('jOrbital') ) {

var $parent = $this.parent().parent();
var pos1 = $this.offset();
var pos2 = $this.parent().parent().offset();

pos1.left += $this.outerWidth() / 2;
pos2.left += $parent.outerWidth() / 2;
pos1.top += $this.outerHeight() / 2;
pos2.top += $parent.outerHeight() / 2;

var angle = vecClock({ x:pos2.left - pos1.left, y:pos2.top - pos1.top }) + Math.PI / 2 + 0.25;

data.circleRange = [ angle, angle + Math.PI ];
data.step = ( data.circleRange[1] - data.circleRange[0] ) / data.planets;
}

$this.children( data.selector ).css({opacity:1}).fadeIn(data.inDuration, function(){

/* animate planets */

$(this).children().addClass('animated').each( function( i, planet ){
var $planet = $(planet);
$planet.animate({
left: data.r + Math.cos( - Math.PI / 2 + data.step * i + data.circleRange[0] ) * data.r - $planet.outerWidth() / 2,
top: data.r + Math.sin( - Math.PI / 2 + data.step * i + data.circleRange[0] ) * data.r - $planet.outerHeight() / 2
}, {
complete:function(){
$(this).removeClass('animated');
},
duration:data.inDuration,
queue:true
});

});

});


/* planets inital position */

var step = ( Math.PI * 2 ) / $this.children( data.selector ).children().size();
$this.parent().children().css({"z-index":2});
$this.css({"z-index":1});
$this.children( data.selector ).children().each( function( i, planet ){

var $planet = $(planet);
$planet.stop().css({
left: data.r + Math.cos( - Math.PI / 2 + step * i ) * ( data.r * 0.5 ) - $planet.outerWidth() / 2,
top: data.r + Math.sin( - Math.PI / 2 + step * i ) * ( data.r * 0.5 ) - $planet.outerHeight() / 2,
position: 'absolute'
});

});

});

$o.mouseleave( function() {
$(this).children( data.selector ).fadeOut(data.outDuration);

var r = $(this).outerWidth();
step = ( Math.PI * 2 ) / $(this).children( data.selector ).children().size();

$(this).children( data.selector ).children().each( function( i, planet ){

var $planet = $(planet);

$planet.animate({
left: data.r - $(this).outerWidth() / 2,
top: data.r - $(this).outerHeight() / 2
}, {
complete : function() {
$(this).find('jOrbital').hide();
},
duration:data.outDuration, queue:true
});


});
});

$o.data( 'jOrbital', data );

// $o.children( data.selector ).hide();

};


$.jOrbital = function( command, options ){
switch( command ){
case 'config':
config = $.extend( {}, config, options );
break;
case 'defaults':
defaults = $.extend( {}, defaults, options );
break;

};
}

$.fn.jOrbital = function( command, options ){



if( config.disableIE6 && $.browser.msie && parseInt($.browser.version) <= 6 ) {
return this;
}

if( config.disableIE7 && $.browser.msie && parseInt($.browser.version) <= 7 ) {
return this;
}

if( command == undefined ) var command = {}

if( isArray(command) ){
for( i in command ) {
this.each(function( io, o ){
setup( $(o), command[i] );
});
}
return this;
}
else if( typeof command == 'object' ){
return this.each(function( i, o ){
setup( $(o), command );
});
}
else {
if( typeof options != 'object' ) options = { }
options.type = command;

return this.each(function( i, o ){
setup( $(o), options );
});
};
};


})(jQuery);


</script>

<!--[if lt IE 9]>

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>

<![endif]-->




<style type="text/css">

body { height:1024px; text-align:center; background:#000 url(bg.png) center center no-repeat; overflow:hidden; color:#f0f; font-family:"trebuchet ms"; padding:0; margin:0 }

h1:hover {color:#a00 }

span { border:2px solid #f9f }

span:hover { border-color:#fff !important }



.orbital { background:#202; top:300px; width:16px; height:16px; left:400px; padding:20px;

border:1px solid #a0a;

border-radius:300px !important;

-moz-border-radius:300px !important;

-webkit-border-radius:300px !important; }



.orbit .orbit .orbit span { background:rgba(50,255,255,0.2); color:#4aa; border-color:#6ff }

.orbit .orbit .orbit .orbit span { background:rgba(255,185,40,0.2); color:#ca6; border-color:#fc5 }



.orbit { border:1px solid #d6d;

border-radius:200px;

background:url(ietrans.gif);

-moz-border-radius:200px;

-webkit-border-radius:200px; }

.orbit span { display:block; background:rgba(255,0,255,0.25); width:32px; height:32px; line-height:32px;

border-radius:32px;

-moz-border-radius:32px;

-webkit-border-radius:32px; }







.orbital3, .orbital4, .orbital2 { border-style:dotted; }

</style>



<script type="text/javascript">

/* when document is ready */

$( function() {



/* bind Fireball effect to every H1 on page */

$(".orbital4").jOrbital({});

$(".orbital3").jOrbital({});

$(".orbital2").jOrbital({});

$(".orbital").jOrbital({});





});

</script>





<div class="orbital">Code1k.com



<div class="orbit">

<span class="orbital">1</span>

<span class="orbital2">2

<div class="orbit">

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

<span>6</span>

</div>

</span>

<span class="orbital">3</span>

<span class="orbital">4</span>

<span class="orbital2">5

<div class="orbit">

<span>1</span>

<span>2</span>

<span>3</span>

<span class="orbital3">4

<div class="orbit">

<span>1</span>

<span>2</span>

<span class="orbital4">4

<div class="orbit">

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

</div>

</span>

<span>3</span>

<span>4</span>

</div>

</span>

<span>5</span>

</div>

</span>

</div>

</div>