关于本站的分类功能
大家可以看到,在导航条上有一个分类啦,可以进入查看各种分类的博客
关于分类页面的标签云,源码主要是从网上找到的,这里给出源码和源地址
源地址是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
评论
0
点击
1923