鼠标点击效果

最新推荐文章于 2024-07-20 11:04:35 发布

飞吃鱼

最新推荐文章于 2024-07-20 11:04:35 发布

阅读量240

点赞数

分类专栏：前端HTML5 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_53191752/article/details/120249138

版权

前端HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jq实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标点击页面特效</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 设置一个计数a_index
        var a_index = 0;
        $(function() {
            // 设置鼠标点击方法
            $("body").click(function(e) {
                // 创建要显示的内容一个数组
                var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
                // 创建一个容器 并插入显示文字
                var sp = $("<span></span>").text(a[a_index])
                    // 创建按顺序显示文本 则要进行对a_index的值改变
                    // 因为a_index是0开始所以加一进行取余
                a_index = (a_index + 1) % a.length;
                // 获取鼠标坐标
                var x = e.pageX,
                    y = e.pageY
                    // 设置样式
                sp.css({
                    "z-index": 464646664,
                    "left": x,
                    "top": y - 20,
                    "position": "absolute",
                    // 设置颜色随机生成
                    "color": "rgb(" + (255 * Math.random()) + "," + (255 * Math.random()) + "," + (255 * Math.random()) + ")",
                    "font-weight": "bold",
                })

                $("body").append(sp);
                // 设置动画
                sp.animate({
                        "top": y - 180,
                        "opacity": 0,
                    }, 1500,
                    function() {
                        sp.remove()
                    })
            })
        })
    </script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <h1 align="center">尝试在空白处点击鼠标</h1>
</body>

</html>