论坛首页 Web前端技术论坛

自己写的TagBOX---随机变换的字体颜色和大小

浏览 1516 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-04-11  
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var config = {
					renderTo : "foo" ,
					tags : [
						"JQuery","Prototype","ExtJS","Dojo","Yahoo-YUI","MooTools",
						"Script.Aculo.Us","MochiKit","Rialto","Spry Framework","QooXdoo","Zepo"
					]
				} ;
				TagBOX.load(config) ;
			}) ;
			var TagBOX = function(){
				function load(config){
					var renderTo = $(document.getElementById(config.renderTo)) ;
					var tags = config.tags ;
					_render(renderTo,tags) ;
				} ;
				function _render(renderTo,tags){
					var tagBox = $("<div></div>")
								.addClass("tag-box")
								.appendTo(renderTo) ;
					var close = $("<div></div>")
								.addClass("close")
								.appendTo(tagBox) ;
					var _a = $("<a href='#'></a>")
							.html("打开/关闭")
							.appendTo(close)
							.click(function(){
								var jq = $(this).parent().next().slideToggle() ;
							}) ;
					var _ul = $("<ul></ul>").appendTo(tagBox) ;
					for(var i=0;i<tags.length;i++){
						var tag = tags[i] ;
						var _css = _getStyle() ;
						
						var _li = $("<li></li>").appendTo(_ul) ;
						var _a_ = $("<a href=''></a>")
								.html(tag)
								.css(
									{
										color : _css.color ,
										fontSize : _css.size
									}
								)
								.appendTo(_li) ;
					}
				} ;
				function _getStyle(){
					var sizes = ["11","12","13","14","15","16","18"] ;
					var colors = ["#000","#ff0033","#336699","brown","green","puple","#ffcc00"] ;
					var _style = new Object() ;
					_style.color = colors[parseInt(Math.random() * colors.length)] ;
					_style.size = parseInt(sizes[parseInt(Math.random() * sizes.length)]) ;
					return _style ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics