你的心如利箭 在风中笔直的飞翔
github DNS ALEXA CDN
jquery JS CSS CSS3 HTML5 svg php --- isux w3cplus

21270

  博客园  :: 首页  ::  ::  ::  :: 管理

http://www.mycodes.net/170/8434.htm   jQCloud热门城市文字标签云

http://www.mycodes.net/170/8013.htm  Win8风格随机文字生成标签云代码(需要研究一下,需要改写。为了seo,需要把词汇列表写在页面中)  2015-11-18

 

 

 

 

 

 

文字标签云,js 使文字排列整齐一些:(不完善,只是试验一下)  2015-11-19

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".taglist").click(function(){
        var len=$(".taglist").find("a").size();
        var alist=$(".taglist").find("a");
        var taglistW = $(".taglist").width();
        var offset = parseFloat(alist.eq(0).css("paddingLeft")) + parseFloat(alist.eq(0).css("paddingRight")) + parseFloat(alist.eq(0).css("marginRight"))  + parseFloat(alist.eq(0).css("borderRight"))*2;
        for(var i=1;i<len;i++){
            alist.eq(i).attr("id",i);
        }
        for(var i=1;i<len;i++){
            console.log("offset"+offset);
            var x0=alist.eq(i-1).position().left;
            var w0=alist.eq(i-1).width() + offset;
            var x1=alist.eq(i).position().left;
            var w1=alist.eq(i).width() + offset;
            if(taglistW-x0-w0-w1<0){
                alist.eq(i).after(alist.eq(i-1).remove());//移动标签
            }
            //console.log("x0="+x0+",  w0:"+w0);
            //console.log("                       x1:"+x1+",  w1:"+w1);
        }

    });
});
</script>
<section class="taglist">
<a href="">标题标题题标题</a>
<a href="">标题标题</a>
<a href=""></a>
<a href="">标题标题标题</a>
</section>

 

....

 

posted on 2015-11-18 16:42  bjhhh  阅读(324)  评论(0编辑  收藏  举报