jquery实现在鼠标点击处的炫酷效果

鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图

jquery实现在鼠标点击处的炫酷效果

是不是很炫酷,直接贴代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var height=$(window).width();
            $('#test').css({
                'height':height,
            });
            var n=1;
            $('#test').click(function(e){
                if(n%2==0){
                    var $i=$('<b></b>').text('你点击了一下');//双数显示这个
                }else{
                    var $i=$('<b></b>').text('❤666');//单数显示这个
                }
                n++;
                var x=e.pageX,y=e.pageY;//获取鼠标点击的位置坐标
                $i.css({
                    "z-index": 9999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "color": 'red',
                    "font-size": 14,
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                }, 1500, function() {
                    $i.remove();
                });//设置动画
            });
        });
    </script>
</head>
<body>
<div id="test">

</div>
</body>
</html>

主要运用了css的animate特效,这个我会在后面文章总结

.

相关推荐