$(document).ready(function() { var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); if ( i == 0 ) { maxWidth = $this.width() - 40; maxCount = thisCount; } var thisWidth = (thisCount / maxCount) * maxWidth; $this.find('.comment-bar').animate({ width : thisWidth }, 200, 'swing'); }); });
<ul id="most-commented"> <li> <a href="#" rel="bookmark" title="">記事1</a> <span class="comment-bar"><span class="comment-count">258</span></span> </li> <li> <a href="#" rel="bookmark" title="">記事2</a> <span class="comment-bar"><span class="comment-count">206</span></span> </li> <li> <a href="#" rel="bookmark" title="">記事3</a> <span class="comment-bar"><span class="comment-count">144</span></span> </li> <li> <a href="#" rel="bookmark" title="">記事4</a> <span class="comment-bar"><span class="comment-count">53</span></span> </li> </ul>
#most-commented { width: 400px; } #most-commented li { list-style: none; } #most-commented a { display: block; } #most-commented .comment-bar { display: inline-block; position: relative; height: 30px; width: 0; margin: 5px 0; padding-left: 20px; background-color: #999; } #most-commented .comment-count { display: inline-block; position: absolute; right: -20px; top: -5px; width: 34px; height: 34px; border-width: 3px; border-style: solid; border-color: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 34px; background-color: #6CAC1F; font-size: 13px; font-weight: bold; color: #FFF; }