jQuery纯代码实现点赞+1动画效果
昵称
密码
标签搜索

jQuery纯代码实现点赞+1动画效果

小王先森
2019-06-22 / 6 评论 / 368 阅读 / 正在检测是否收录...
/
温馨提示:
本文最后更新于2021年06月22日,已超过91天没有更新,若内容或图片失效,请留言反馈。

以本站使用的知更鸟 begin 主题为例,使用 jQuery 纯代码实现点赞动画效果+1。其实 begin 主题已经集成了点赞功能,只是存在一点瑕疵。

1、集成的点赞针对文章有效,其他的无效。

2、这两天增加了一个微博动态功能,调用这个点赞功能时在 begin_script.js 文件中报两个错。

#报错1,点击分类下的标题与摘要列表中的点赞时
Uncaught ReferenceError: wpl_ajax_url is not defined
#报错2,点赞+1特效时
Uncaught ReferenceError: niceIn is not defined

这里已经找到解决办法,并已经完善了这个点赞功能。

找到 $.post(wpl_ajax_url,a,function(e){jQuery(b).html(e)}); 这一句,修改为:

$.post('/wp-admin/admin-ajax.php',a,function(e){jQuery(b).html(e)});

解决报错 1 的问题。

找到 niceIn($(this)) 这一句,在这一句的 function() 函数前加入以下内容:

function niceIn(prop){
    prop.find('i').addClass('niceIn');
    setTimeout(function(){
        prop.find('i').removeClass('niceIn');    
    },1000);        
}

解决报错 2 的问题。

完整的点赞 +1 特效 JS 如下:

<script type="text/javascript">
(function($) {
    $.extend({
        tipsBox: function(options) {
            options = $.extend({
                obj: null,
                str: "+1",
                startSize: "12px",
                endSize: "30px",
                interval: 600,
                color: "red",
                callback: function() {}
            },
            options);
            $("body").append("&lt;span class='num'&gt;" + options.str + "&lt;/span&gt;");
            var box = $(".num");
            var left = options.obj.offset().left + options.obj.width() / 2;
            var top = options.obj.offset().top - options.obj.height();
            box.css({
                "position": "absolute",
                "left": left + "px",
                "top": top + "px",
                "z-index": 9999,
                "font-size": options.startSize,
                "line-height": options.endSize,
                "color": options.color
            });
            box.animate({
                "font-size": options.endSize,
                "opacity": "0",
                "top": top - parseInt(options.endSize) + "px"
            },
            options.interval,
            function() {
                box.remove();
                options.callback()
            })
        }
    })
})(jQuery);
function niceIn(prop) {
    prop.find('i').addClass('niceIn');
    setTimeout(function() {
        prop.find('i').removeClass('niceIn')
    },
    1000)
}
$(function() {
    $(".dingzan").click(function() {
        $.tipsBox({
            obj: $(this),
            str: "+1",
            callback: function() {}
        });
        niceIn($(this))
    })
});
</script>

判断是否点赞,弹出点击提示语

<script type="text/javascript">
$.fn.postLike = function() {
    if (jQuery(this).hasClass("done")) {
        alert("您已赞过啦!");
        return false
    } else {
        $(this).addClass("done");
        var d = $(this).data("id"),
        c = $(this).data("action"),
        b = jQuery(this).children(".count");
        var a = {
            action: "zm_ding",
            um_id: d,
            um_action: c
        };
        $.post('/wp-admin/admin-ajax.php', a,
        function(e) {
            jQuery(b).html(e)
        });
        return false
    }
};
$(document).on("click", ".dingzan",
function() {
    $(this).postLike()
});
</script>

页面调用

<div class="post-like">
    <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php _e( '点赞', 'begin' ); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>"><i class="be be-thumbs-up-o"></i>&amp;nbsp;<?php _e( '赞', 'begin' ); ?> <i class="count">
        <?php if( get_post_meta($post->ID,'zm_like',true) ){
            echo get_post_meta($post->ID,'zm_like',true);
        } else {
            echo '0';
        }?></i>
    </a>
 </div>

CSS 代码

<style>
    .post-like a{color:#999;}
    .post-like a:hover{color:#004687;} 
    .post-like a.done{color:#004687;}
</style>
2

评论 (6)

取消
  1. 头像
    Jane博客
    MacOS · Google Chrome

    新版begin好像取消了+1特效,如果想使用的话应该怎么做呢?能教教我不

    回复
    1. 头像
      小王先森 作者
      Android · Google Chrome
      @ Jane博客

      https://xwsir.cn/949.html
      这篇文章我写到了

      回复
  2. 头像
    Marc
    Windows 7 · Google Chrome

    学习下~

    回复
  3. 头像
    行吟游子
    Windows 7 · Google Chrome

    先做个记号,有空来试试。我的TYPECHO,不知道合不合适

    回复
  4. 头像
    萧瑟
    Windows 10 · Google Chrome

    很不错,记录的很详细,但是个人觉得点赞和分享功能很少有人使用了,而且这个功能,对博客数据库也增加了轻微的负担。 :mrgreen:

    回复
    1. 头像
      小王先森 作者
      Android Pie · Google Chrome
      @ 萧瑟

      这个使用的是浏览器cookie,不需要存数据库吧

      回复