网友浪漫少帅分享Love button原创Jquery特效

所属分类：js特效

发布时间：2012/12/12 15:18:36

下载量：1079

评论数：2

转载请自觉注明原文：http://www.jq-school.com/Detail.aspx?id=127

首先非常感谢网友浪漫少帅的无私分享，Love button原创Jquery特效是一款很实用的小功能，应用范围也比较广，很多网站也用到此类功能，像对一种商品和资源进行投票选项，喜欢与不喜欢等。使用也非常简单代码如下：

Jquery代码如下：

(function($) {
  $('.btn-counter').on('click', function(event, count) {
    event.preventDefault();

    var $this = $(this),
        count = $this.attr('data-count'),
        active = $this.hasClass('active'),
        multiple = $this.hasClass('multiple-count');

    $.fn.noop = $.noop;
    $this.attr('data-count',
        ! active || multiple ? ++count : --count
    )[multiple ? 'noop' : 'toggleClass']('active');

  })
})(jQuery);

HTML代码如下：

<p>
	<a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span></a>
	<a href="#" title="喜欢" class="btn" data-count="0"><span>&#x2764;</span>喜欢</a>
</p>

<h3>Button with counter - active/inactive</h3>
<p>
	<a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span></a>
	<a href="#" title="喜欢" class="btn btn-counter" data-count="0"><span>&#x2764;</span>喜欢</a>
</p>

<h3>Button with counter for people who likes to  click</h3>
<p>
	<a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span></a>
	<a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span>Love</a>
</p>

效果如下：

• 如果你喜欢学院的资源就下载吧，亲，谢谢！
• 
• 
• 提示：如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网，版权归作品最初创作人，转载请注明（出处）原文链接，转载前请邮件至磐temdy@qq.com，一旦发现造成侵权行为，后果自负。。