点赞

来源:互联网 发布:蓝牙4.0测试软件下载 编辑:程序博客网 时间:2024/04/27 21:23
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>godme</title>    <style>        .action:hover{            cursor: pointer;        }        .action{            width: 50px;            position: fixed;            top:40%;            left:40%;            font-size: 80px;            color: red;        }    </style></head><body>    <div class="action">        <span>赞</span>    </div></body><script src="jquery-3.2.1.min.js"></script><script>    $('.action').click(function () {        var fontSize = 15;        var top = 0;        var left = 50;        var opacity = 1;        var d = document.createElement("span");        $(d).css("position","absolute");        $(d).css('color','green');        $(d).text("+4");        $(d).css("fontSize",fontSize);        $(d).css("top",top + "px");        $(d).css("left",left + "px");        $(d).css("opacity",opacity);        $(this).append(d);        var obj = setInterval(function () {            fontSize += 5;            top -= 10;            left += 8;            opacity -= 0.2;            $(d).css("fontSize",fontSize);            $(d).css("top",top + "px");            $(d).css("left",left + "px");            $(d).css("opacity",opacity-0.1);            if(opacity <= 0){                clearInterval(obj);                $(d).remove();            }        },100);    })</script></html>

原创粉丝点击