You Now Here »

Tutorial Javascript cara mudah membuat Jquery Tag Sphere 3D  (Read 2154 times - 69 votes) 

DANNY

G-Plus Author
  • ADMINISTRATOR
  • More Share Forum Topic
  • [MS] kepala suku
  • *
  • DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!DANNY sangat terkenal!
  • Rep Power: 6
  • Join: September 30, 2009
  • Posts: 11,931
  • Poin: 194.169
    • WWW
  • IP member tracker Logged
Tutorial Javascript cara mudah membuat Jquery Tag Sphere 3D
« on: February 21, 2013, 02:59:46 AM »


oke langsung aja yah buat nambah ilmu, banyak tag dalam sebuah website terkadang membuat penuh satu halaman sehingga kurang enak dipandang, oleh sebab itu kita akan melakukan modifikasi sedikit pada area tag agar lebih enak dilihat dengan memperkecil areanya dan ditampilkan dalam bentuk globe 3D  Sphere.

Code: (source code) [Select]
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
(function(c){var a=["DOMMouseScroll","mousewheel">;c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);

(function($){$.fn.tagcloud=function(options){var opts=$.extend($.fn.tagcloud.defaults,options);opts.drawing_interval=1/(opts.fps/1000);$(this).each(function(){new TagCloudClass($(this),opts);});return this;};$.fn.tagcloud.defaults={zoom:75,max_zoom:120,min_zoom:25,zoom_factor:2,rotate_by:-1.75,fps:10,centrex:250,centrey:250,min_font_size:12,max_font_size:32,font_units:'px',random_points:0};var TagCloudClass=function(el,options){$(el).css('position','relative');$('ul',el).css('display','none');var eyez=-500;var rad=Math.PI/180;var basecos=Math.cos(options.rotate_by*rad);var basesin=Math.sin(options.rotate_by*rad);var sin=basesin;var cos=basecos;var hex=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");var container=$(el);var id_stub='tc_'+$(this).attr('id')+"_";var opts=options;var zoom=opts.zoom;var depth;var lastx=0;var lasty=0;var points=[];points['data']=[];var drawing_interval;var cmx=options.centrex;var cmy=options.centrey;function getgrey(num){if(num>256){num=256;}
if(num<0){num=0;}
var rem=num%16;var div=(num-rem)/16;var dig=hex[div]+hex[Math.floor(rem)];return dig+dig+dig;}
function rotx(){for(var p in points.data)
{var temp=sin*points.data[p].y+cos*points.data[p].z;points.data[p].y=cos*points.data[p].y-sin*points.data[p].z;points.data[p].z=temp;}}
function roty(){for(var p in points.data){var temp=-sin*points.data[p].x+cos*points.data[p].z;points.data[p].x=cos*points.data[p].x+sin*points.data[p].z;points.data[p].z=temp;}}
function rotz(){for(var p in points.data){var temp=sin*points.data[p].x+cos*points.data[p].y;points.data[p].x=cos*points.data[p].x-sin*points.data[p].y;points.data[p].y=temp;}}
function zoomed(by){zoom+=by*opts.zoom_factor;if(zoom>opts.max_zoom){zoom=opts.max_zoom;}
if(zoom<opts.min_zoom){zoom=opts.min_zoom;}
depth=-(zoom*(eyez-opts.max_zoom)/100)+eyez;}
function moved(mx,my){if(mx>lastx){sin=-basesin;roty();}
if(mx<lastx){sin=basesin;roty();}
if(my>lasty){sin=basesin;rotx();}
if(my<lasty){sin=-basesin;rotx();}
lastx=mx;lasty=my;}
function draw(){var normalz=depth*depth;var minz=0;var maxz=0;for(var r_p in points.data){if(points.data[r_p].z<minz){minz=points.data[r_p].z;}
if(points.data[r_p].z>maxz){maxz=points.data[r_p].z;}}
var diffz=minz-maxz;for(var s_p in points.data){var u=(depth-eyez)/(points.data[s_p].z-eyez);var grey=parseInt((points.data[s_p].z/diffz)*165+80);var grey_hex=getgrey(grey);$('#'+points.data[s_p].id+' a',container).css('color','#'+grey_hex);$('#'+points.data[s_p].id,container).css('z-index',grey);$('#'+points.data[s_p].id,container).css('left',u*points.data[s_p].x+cmx-points.data[s_p].cwidth);$('#'+points.data[s_p].id,container).css('top',u*points.data[s_p].y+cmy);}}
points.count=$('li a',container).length;points.largest=1;points.smallest=0;$('li a',container).each(function(idx,val){var sz=parseInt($(this).attr('rel'));if(sz==0)
sz=1;points.data[idx]={id:id_stub+idx,size:sz};var h=-1+2*(idx)/(points.count-1);points.data[idx].theta=Math.acos(h);if(idx==0||idx==points.count-1){points.data[idx].phi=0;}
else{points.data[idx].phi=(points.data[idx-1].phi+3.6/Math.sqrt(points.count*(1-Math.pow(h,2))))%(2*Math.PI);}
points.data[idx].x=Math.cos(points.data[idx].phi)*Math.sin(points.data[idx].theta)*(cmx/2);points.data[idx].y=Math.sin(points.data[idx].phi)*Math.sin(points.data[idx].theta)*(cmy/2);points.data[idx].z=Math.cos(points.data[idx].theta)*(cmx/2);if(sz>points.largest)points.largest=sz;if(sz<points.smallest)points.smallest=sz;container.append('<div id="'+id_stub+idx+'" class="point" style="position:absolute;"><a href='+$(this).attr('href')+'>'+$(this).html()+'</a></div>');});if(opts.random_points>0){for(b=0;b<opts.random_points;b++){points.count++;points.data[points.count]={id:id_stub+points.count,size:1};points.data[points.count].theta=Math.random()*2*Math.PI;points.data[points.count].phi=Math.random()*2*Math.PI;points.data[points.count].x=Math.cos(points.data[points.count].phi)*Math.sin(points.data[points.count].theta)*(cmx/2);points.data[points.count].y=Math.sin(points.data[points.count].phi)*Math.sin(points.data[points.count].theta)*(cmy/2);points.data[points.count].z=Math.cos(points.data[points.count].theta)*(cmx/2);container.append('<div id="'+id_stub+points.count+'" class="point" style="position:absolute;"><a>.</a></div>');}}
var sz_range=points.largest-points.smallest+1;var sz_n_range=opts.max_font_size-opts.min_font_size+1;for(var p in points.data){var sz=points.data[p].size;var sz_n=parseInt((sz/sz_range)*sz_n_range)+opts.min_font_size;if(!$('#'+points.data[p].id,container).hasClass('background')){$('#'+points.data[p].id,container).css('font-size',sz_n);}
points.data[p].cwidth=$('#'+points.data[p].id,container).width()/2;}
$('ul',container).remove();zoomed(opts.zoom);moved(cmx,cmy);drawing_interval=setInterval(draw,opts.drawing_interval);container.mousemove(function(evt){moved(evt.clientX,evt.clientY);});container.mousewheel(function(evt,delta){zoomed(delta);evt.preventDefault();return false;});};})(jQuery);
</script>

    <script type="text/javascript">
$(function(){
  $('#boxtest').tagcloud({centrex:100,centrey:100,min_font_size:10,max_font_size:16,zoom:100});
});
    </script>
   

<center>
<div id="boxtest" style="width:250px; height:250px; background-color:#000;position:relative;overflow:hidden">
    <ul>
<li><a href="#" rel="1">Link 1</a></li>
<li><a href="#" rel="2">Link 2</a></li>
<li><a href="#" rel="3">Link 3</a></li>
<li><a href="#" rel="4">Link 4</a></li>
<li><a href="#" rel="5">Link 5</a></li>
<li><a href="#" rel="6">Link 6</a></li>
<li><a href="#" rel="7">Link 7</a></li>
<li><a href="#" rel="8">Link 8</a></li>
<li><a href="#" rel="9">Link 9</a></li>
<li><a href="#" rel="1">Link 10</a></li>
<li><a href="#" rel="2">Link 11</a></li>
<li><a href="#" rel="3">Link 12</a></li>
<li><a href="#" rel="4">Link 13</a></li>
    </ul>
</div>
<center>

(click to show)

moga bermanfaat
dan menambah wawasan
salam moreshare
  :beer:


View Mobile Web Short URL:
« Last Edit: February 21, 2013, 02:05:57 PM by DANNY »