Etiket: Renkli

Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz

https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

istediğimiz alana bu menü linklerimizi ekliyoruz.

<ul id="test" class="xmpl" style="height: 390px; width: 698px;">
    <?php for($x=0;$x<100;$x++){
         echo '<li value="'.floor(100-$x).'"><a href="#'.$x.'" >d'.$x.'n</a></li>';
    }?>
</ul>

script tagı içerisinde bu kodları ekliyoruz

/*
* jQuery TagCloud 0.5.1
*/
;(function($) {
	// private variables
	var oSettings;
	var oUlCss = {};
	var oLiCss = {};
	var fGAng = 2.399963; // sphere angle in radians*pi
	// default settings
	$.tagcloud = {
		 id: "TagCloud"
		,version: "0.5.1"
		,defaults: {
			 height: null
			,type: "cloud"		// "cloud", "list" or "sphere"
			,sizemax: 20
			,sizemin: 10
			,colormax: "00F"
			,colormin: "B4D2FF"
			,seed: null			// only for type=="cloud"
			,power: .5			// only for type=="sphere"
			,padding: 0
		}
	};
	$.fn.extend({
		tagcloud: function(_settings) {
			oSettings = $.extend({}, $.tagcloud.defaults, _settings);
			if (oSettings.seed===null) oSettings.seed = Math.ceil(Math.random()*45309714203);

			switch (oSettings.type) {
				// treemap ::	http://www.jquery.info/The-TreeMap-plugin
								
				case "sphere":
				case "cloud":
					oUlCss = {position:"relative"};
					oLiCss = {position:"absolute",display:"block"};
				break;
				case "list":
					oUlCss = {height:"auto"};
					oLiCss = {position:"static",display:"inline"};
				break;
			}

			Rng.setSeed(oSettings.seed+123456);

			return this.each(function(i,o) {
				var mUl = $(o);
				var aLi = mUl.find(">li");
				var iNumLi = aLi.length;


				var iUlW = mUl.width();
//				var iUlH = oSettings.height===null?mUl.height():oSettings.height;
				var iUlH = oSettings.height===null?(.004*iUlW*iNumLi):oSettings.height;
				mUl.css({width:iUlW,height:iUlH,listStyle:"none",margin:0,padding:0});
				mUl.css(oUlCss);
				

				var iValMx = -2147483647;
				var iValMn = 2147483648;
				var iLastVal = -1;
				for (var j=0;j<iNumLi;j++) {
					var mLi = $(aLi[j]);
					var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
					if (iVal>iValMx) iValMx = iVal;
					if (iVal<iValMn) iValMn = iVal;
					iLastVal = iVal;
				}
				var iValRn = iValMx-iValMn;

				// place on line to create minimal overlays
				var aLine = new Array();
				for (var j=0;j<iNumLi;j++) aLine[j] = j;
				for (var j, x, k = aLine.length; k; j = parseInt(Rng.rand(0,1000)/1000 * k), x = aLine[--k], aLine[k] = aLine[j], aLine[j] = x);

				iLastVal = -1;
				for (var j=0;j<iNumLi;j++) {
					var mLi = $(aLi[j]);;
					var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
					iLastVal = iVal;
					//
					var fPrt = ((iNumLi-j-1)/(iNumLi-1));
					var fPrt = (iVal-iValMn)/iValRn;
					//
					var iSzFnt = oSettings.sizemin + fPrt*(oSettings.sizemax-oSettings.sizemin);
					var sColor = colorRng(oSettings.colormin,oSettings.colormax,fPrt);
					//
					mLi.css({"word-wrap":"break-word",
                             "fontSize":iSzFnt,
                             "position":"absolute",
                             "color":"#"+sColor,
                             "margin":0,
                             "padding":oSettings.padding}).children().css({color:"#"+sColor});
					var iLiW = mLi.width();
					var iLiH = mLi.height()
					//
					var oCss = {};
					if (oSettings.type!="list") {
						if (oSettings.type=="cloud") {
							var iXps = Rng.rand(0,iUlW-iLiW);
							var iYps = aLine[j]*(iUlH/iNumLi) - iLiH/2;
						} else {
							var fRds = Math.pow(j/iNumLi,oSettings.power);
							var fRad = (j+Math.PI/2)*fGAng;
							var iXps = iUlW/2 - iLiW/2 + .5*iUlW*fRds*Math.sin(fRad);
							var iYps = iUlH/2 - iLiH/2 + .5*iUlH*fRds*Math.cos(fRad);
						}
						oCss.left = iXps;
						oCss.top  = iYps;
					}
					for (var prop in oLiCss) oCss[prop] = oLiCss[prop];
					mLi.css(oCss);
				}
			});
		}
	});
	// Park-Miller RNG
	var Rng = new function() {
		this.seed = 23145678901;
		this.A = 48271;
		this.M = 2147483647;
		this.Q = this.M/this.A;
		this.R = this.M%this.A;
		this.oneOverM = 1.0/this.M;
	}
	Rng.setSeed = function(seed) {
		this.seed = seed;
	}
	Rng.next = function() {
		var hi   = this.seed/this.Q;
		var lo   = this.seed%this.Q;
		var test = this.A*lo - this.R*hi;
		this.seed = test + (test>0?0:this.M);
		return (this.seed*this.oneOverM);
	}
	Rng.rand = function(lrn, urn) {
		return Math.floor((urn - lrn + 1) * this.next() + lrn);
	}
	// hex dec
	function d2h(d) {return d.toString(16);}
	function h2d(h) {return parseInt(h,16);}
//	function getC(s,rgb) {
//		var aRng = [[[0,1],[1,2],[2,3]],[[0,2],[2,4],[4,6]]][s.length==3?0:1][rgb];
//		return s.substring(aRng[0],aRng[1]);
//	}
	function getRGB(s) {
		var b3 = s.length==3;
		var aClr = [];
		for (var i=0;i<3;i++) {
			var sClr = s.substring( i*(b3?1:2), (i+1)*(b3?1:2) );
			aClr.push(h2d(b3?sClr+sClr:sClr));
		}
		return aClr;
	}
	function getHex(a) {
		var s = "";
		for (var i=0;i<3;i++) {
			var c = d2h(a[i]);
			if (c.length==1) c = "0"+c; // todo: this can be better
			s += c;
		}
		return s;
	}
	function colorRng(mn,mx,prt) {
		var aMin = getRGB(mn);
		var aMax = getRGB(mx);
		var aRtr = [];
		for (var i=0;i<3;i++) aRtr.push( aMin[i] + Math.floor(prt*(aMax[i]-aMin[i])) );
		return getHex(aRtr);
	}
	// trace
	function trace(o) {
		if (window.console&&window.console.log) {
			if (typeof(o)=="string")	window.console.log(o);
			else						for (var prop in o) window.console.log(prop+": "+o[prop]);
		}
	};
	// set functions
	$.fn.TagCloud = $.fn.Tagcloud = $.fn.tagcloud;
})(jQuery);
$(document).ready(function() {
$("ul").tagcloud({type:"sephere",width:300,height:300,sizemin:8,sizemax:36,power:0.5});
 function createRandomColor() { 
 var hex = '0123456789ABC'.split(''), color = '#', i; 
 for (i = 0; i < 6; i += 1) {
 color = color + hex[Math.floor(Math.random() * 13)];
 } 
 return color;
}
 $('ul li').each(function() {
 var $a = $(this).find('a');
 var rastgelerenk = createRandomColor();
 $a.css({color: rastgelerenk});
 });
});