jq实现双击点赞效果

最新推荐文章于 2023-11-30 20:31:30 发布

Z~Ya

最新推荐文章于 2023-11-30 20:31:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： jq 点赞

本文链接：https://blog.youkuaiyun.com/qq_43639075/article/details/90265105

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ver-video-cover {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 11;
        }
    </style>
</head>
<body>
<div class="ver-video-cover"></div>
</body>
<script type="text/javascript" src="https://lib.baomitu.com/fastclick/1.0.6/fastclick.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
        // 获取随机数
        function verRandomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }

        // 点赞动效
        function likeAnimation(e) {
            var randomDeg = verRandomNum(0, 45);
            var $Ani = $('<img class="ver-my-zan" src="https://v.cmcc-cs.cn/ngvlcs/app/img/ver-like1.png">');
            var x = e.pageX, y = e.pageY;//获取鼠标点击的位置坐标
            $Ani.css({
                "z-index": 30,
                "top": y - 30,
                "left": x - 30,
                "position": "absolute",
                "width": '60',
                "height": '60',
                "transform": "rotate(-" + randomDeg + "deg)"
            });
            $("body").append($Ani);
            $Ani.animate({
                "top": y - 180,
                "width": '120',
                "height": '120',
                "opacity": 0
            }, 1000, function () {
                $Ani.remove();
            });//设置动画

        }
        var verClickNum = 1, clickTimer = null, lastClickTime = 0;
        $("body").on("click", ".ver-video-cover,.ver-my-zan", function (e) {
            var nowTime = new Date().getTime();
            if (nowTime - lastClickTime < 300) {
                /*双击*/
                verClickNum++;
                lastClickTime = 0;
                clickTimer && clearTimeout(clickTimer);
                likeAnimation(e)
            } else {
                /*单击*/
                lastClickTime = nowTime;
                clickTimer = setTimeout(function () {
                    if(verClickNum > 1){
                        verClickNum = 1;
                        return;
                    }else {

                    }
                }, 300);
            }

        });

    });

</script>
</html>