1、新建html文档。
2、书写hmtl代码。<div class="" style="width: 100%;"><div id="my_favorite_latin_words" style="width: 400px; margin: 0px auto; height: 400px; border: 1px solid #ccc; "></div></div>
3、书写css代码。div.jqcloud { font-family: "微软雅黑", "微软雅黑", sans-serif; font-size: 10px; line-height: normal; }div.jqcloud a { font-size: inherit; text-decoration: none; }div.jqcloud span.w10 { font-size: 400%; }div.jqcloud span.w9 { font-size: 360%; }div.jqcloud span.w8 { font-size: 350%; }div.jqcloud span.w7 { font-size: 240%; }div.jqcloud span.w6 { font-size: 210%; }div.jqcloud span.w5 { font-size: 190%; }div.jqcloud span.w4 { font-size: 170%; }div.jqcloud span.w3 { font-size: 150%; }div.jqcloud span.w2 { font-size: 130%; }div.jqcloud span.w1 { font-size: 110%; }div.jqcloud { color: #09f; }div.jqcloud a { color: inherit; }div.jqcloud span:hover { color: red; font-size: 40px; font-weight: bold; }div.jqcloud span.w10 { color: #0cf; }div.jqcloud span.w9 { color: #0cf; }div.jqcloud span.w8 { color: #0cf; }div.jqcloud span.w7 { color: #39d; }div.jqcloud span.w6 { color: #90c5f0; }div.jqcloud span.w5 { color: #90a0dd; }div.jqcloud span.w4 { color: #90c5f0; }div.jqcloud span.w3 { color: #a0ddff; }div.jqcloud span.w2 { color: #99ccee; }div.jqcloud span.w1 { color: #aab5f0; }div.jqcloud { overflow: hidden; position: relative; }div.jqcloud span { padding: 0; }.append_div { background: black; color: #FFFFFF; opacity: 0.5; text-align: center; position: absolute; height: 100px; width: 80px; }
4、书写并添加js代码。<script src="js/jquery-2.1.0.min.js"></script><script src="js/jqcloud-1.0.4.js" ></script><script > var data=[["广州",13,100],["浙江",10,123],["江苏",9,222],["北京",8,111],["上海",7,111],["河南",6,111],["河北",5,111],["四川",5,111],["安徽",5,111],["湖北",5,111],["福建",4,111],["辽宁",4,111],["湖南",3,111],["陕西",3,111],["广西",3,111],["江西",3,111],["重庆",3,111],["天津",3,111],["云南",2,111],["山西",2,111],["黑龙江",2,111],["吉林",2,111],["内蒙古",2,111],["贵州",2,111],["甘肃",2,111],["海南",2,111],["宁夏",2,111],["青海",1,111],["西藏",1,111],["香港",1,111],["未知",1,111],["台湾",1,111]];var string_="";for(var i=0;i<data.length;i++){var string_f=data[i][0];var string_n=data[i][1];string_+="{text: '"+string_f+"', weight: '"+string_n+"',html: {'class': 'span_list',onmouseover:'on_mouseover(this,event)',onmouseout:'on_mouseout()'}},"}function on_mouseover(e,ev){var txt=$(e).html();ev=ev||event;$.each(data,function(i,item){if(txt==item[0]){var html=item[0]+"<br />曝光数"+item[1]+"<br />"+item[2];$("#my_favorite_latin_words").after("<div class='append_div' style='left:"+ev.clientX+"px; top:"+ev.clientY+"px; '>"+html+"</div>");return}})}$(function(){$("#my_favorite_latin_words").jQCloud(word_list)});var string_list=string_;var word_list=eval("["+string_list+"]");function on_mouseout(){$(".append_div").remove()};</script>
5、书写并添加js代码。(function($){$.fn.jQCloud=function(word_array,options){var $this=this;var cloud_namespace=$this.attr("id")||Math.floor((Math.random()*1000000)).toString(36);var default_options={width:$this.width(),height:$this.height(),center:{x:((options&&options.width)?options.width:$this.width())/2,y:((options&&options.height)?options.height:$this.height())/2},delayedMode:word_array.length>50,shape:false,encodeURI:true,removeOverflowing:true};options=$.extend(default_options,options||{});$this.addClass("jqcloud").width(options.width).height(options.height);if($this.css("position")==="static"){$this.css("position","relative")}var drawWordCloud=function(){var hitTest=function(elem,other_elems){var overlapping=function(a,b){if(Math.abs(2*a.offsetLeft+a.offsetWidth-2*b.offsetLeft-b.offsetWidth)<a.offsetWidth+b.offsetWidth){if(Math.abs(2*a.offsetTop+a.offsetHeight-2*b.offsetTop-b.offsetHeight)<a.offsetHeight+b.offsetHeight){return true}}return false};var i=0;for(i=0;i<other_elems.length;i++){if(overlapping(elem,other_elems[i])){return true}}return false};for(var i=0;i<word_array.length;i++){word_array[i].weight=parseFloat(word_array[i].weight,10)}word_array.sort(function(a,b){if(a.weight<b.weight){return 1}else{if(a.weight>b.weight){return -1}else{return 0}}});var step=(options.shape==="rectangular")?18:2,already_placed_words=[],aspect_ratio=options.width/options.height;var drawOneWord=function(index,word){var word_id=cloud_namespace+"_word_"+index,word_selector="#"+word_id,angle=6.28*Math.random(),radius=0,steps_in_direction=0,quarter_turns=0,weight=5,custom_class="",inner_html="",word_span;word.html=$.extend(word.html,{id:word_id});if(word.html&&word.html["class"]){custom_class=word.html["class"];delete word.html["class"]}if(word_array[0].weight>word_array[word_array.length-1].weight){weight=Math.round((word.weight-word_array[word_array.length-1].weight)/(word_array[0].weight-word_array[word_array.length-1].weight)*9)+1}word_span=$("<span>").attr(word.html).addClass("w"+weight+" "+custom_class);if(word.link){if(typeof word.link==="string"){word.link={href:word.link}}if(options.encodeURI){word.link=$.extend(word.link,{href:encodeURI(word.link.href).replace(/'/g,"%27")})}inner_html=$("<a>").attr(word.link).text(word.text)}else{inner_html=word.text}word_span.append(inner_html);if(!!word.handlers){for(var prop in word.handlers){if(word.handlers.hasOwnProperty(prop)&&typeof word.handlers[prop]==="function"){$(word_span).bind(prop,word.handlers[prop])}}}$this.append(word_span);var width=word_span.width(),height=word_span.height(),left=options.center.x-width/2,top=options.center.y-height/2;var word_style=word_span[0].style;word_style.position="absolute";word_style.left=left+"px";word_style.top=top+"px";while(hitTest(word_span[0],already_placed_words)){if(options.shape==="rectangular"){steps_in_direction++;if(steps_in_direction*step>(1+Math.floor(quarter_turns/2))*step*((quarter_turns%4%2)===0?1:aspect_ratio)){steps_in_direction=0;quarter_turns++}switch(quarter_turns%4){case 1:left+=step*aspect_ratio+Math.random()*2;break;case 2:top-=step+Math.random()*2;break;case 3:left-=step*aspect_ratio+Math.random()*2;break;case 0:top+=step+Math.random()*2;break}}else{radius+=step;angle+=(index%2===0?1:-1)*step;left=options.center.x-(width/2)+(radius*Math.cos(angle))*aspect_ratio;top=options.center.y+radius*Math.sin(angle)-(height/2)}word_style.left=left+"px";word_style.top=top+"px"}if(options.removeOverflowing&&(left<0||top<0||(left+width)>options.width||(top+height)>options.height)){word_span.remove();return}already_placed_words.push(word_span[0]);if($.isFunction(word.afterWordRender)){word.afterWordRender.call(word_span)}};var drawOneWordDelayed=function(index){index=index||0;if(!$this.is(":visible")){setTimeout(function(){drawOneWordDelayed(index)},10);return}if(index<word_array.length){drawOneWord(index,word_array[index]);setTimeout(function(){drawOneWordDelayed(index+1)},10)}else{if($.isFunction(options.afterCloudRender)){options.afterCloudRender.call($this)}}};if(options.delayedMode){drawOneWordDelayed()}else{$.each(word_array,drawOneWord);if($.isFunction(options.afterCloudRender)){options.afterCloudRender.call($this)}}};setTimeout(function(){drawWordCloud()},10);return $this}})(jQuery);
6、查看效果
