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; }
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)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=$('').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=$('').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
