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

avatar
avatar
小王先森
386
文章
383
评论
2019年6月22日 7 1,171

以本站使用的知更鸟 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("<span class='num'>" + options.str + "</span>");
            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>&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>
继续阅读
历史上的今天
六月
22
avatar
  • 本文由 发表于 2019年6月22日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:7   其中:访客  4   博主  3
    • avatar 萧瑟 5

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

      • avatar 行吟游子 4

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

        • avatar Marc 0

          学习下~

          • avatar Jane博客 3

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