关于本站的分类功能

大家可以看到,在导航条上有一个分类啦,可以进入查看各种分类的博客

关于分类页面的标签云,源码主要是从网上找到的,这里给出源码和源地址

源地址是http://www.17sucai.com/pins/7.html

源码:(其实大家去拆JS也是能看到的啦,不过考虑到之后可能要把JS封装所以还是给出来吧)

我所做的改动基本只是把全局变量封进了一个JSON而已

JS部分

function tagpage(){
	tagjson={
		element:$('#taglist div'),
		offset:0,
		stepping:.03,
		list:$('#taglist'),
		interval:false
	}
	tagjson.list.mousemove(function(e){
		var topOfList=tagjson.list.eq(0).offset().top;
		var listHeight=tagjson.list.height();
		tagjson.stepping=(e.clientY-topOfList)/listHeight*0.2-0.1;
	});
	for (var i=tagjson.element.length-1;i>=0;i--){
		tagjson.element[i].elemAngle=i*Math.PI*2/tagjson.element.length;
	}
	tagjson.interval=setInterval(tag_render,20);
}
function tag_render(){
	for (var i=tagjson.element.length-1;i>=0;i--){
		var angle=tagjson.element[i].elemAngle+tagjson.offset;
		var x=120+Math.sin(angle)*30;
		var y=45+Math.cos(angle)*40;
		var size=Math.round(40-Math.sin(angle)*40);
		var elementCenter=$(tagjson.element[i]).width()/2;
		var leftValue=((tagjson.list.width()/2)*x/100-elementCenter)+"px"
		$(tagjson.element[i]).css("fontSize",size+"pt");
		$(tagjson.element[i]).css("opacity",size/100);
		$(tagjson.element[i]).css("zIndex",size);
		$(tagjson.element[i]).css("left",leftValue);
		$(tagjson.element[i]).css("top",y + "%");
	}
	tagjson.offset+=tagjson.stepping;
}

HTML代码部分是

<div id="taglist">
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
	<div><a href="">PhP</a>(5)</div>
</div>

CSS部分

#taglist{
	height:550px;
	overflow:hidden;
	position:relative;
}
#taglist div{
	position:absolute;
	color:#000000;
	text-shadow:0 0 10px #00ffff;
}
#taglist a{
	text-decoration:none;
	font-size:inherit;
	color:inherit;
	text-shadow:inherit;
}
#taglist div:hover{
	text-shadow:0 0 10px #ffff00;
}

2015

02 02

Older

Newer

点击

1923