js构造对象实现鼠标单击文本上飘效果

名还真难取，不知道怎么表达出来。直接上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list {
            position: fixed;
            font-size: 14px;
            font-weight: bold;
            color: seagreen;
        }
    </style>
</head>

<body>

    <script>
        // 新建数组 放置鼠标点击时出现的内容
        var myArr = ["磊磊", "你没有猪的形象", "但你有猪的气质", "你活着浪费空气", "死了浪费土地", "半死不活浪费人命币", "你左看像白痴", "右看像傻子", "我要移民火星", "就是为了离开你", "啊呸"];

        // 获取数组长度
        var len = myArr.length;

        // 定义变量
        var num = 0;

        function mouseEvent(top, left) {
            this.top = top;
            this.left = left;
            this.timer = null;
            // 定义一个初始化方法
            this.init = function() {
                this.oList = document.createElement("div");
                this.oList.classList.add("list"); //创建一个类名为list的div
                document.body.appendChild(this.oList); // 将类名为list的div添加到页面上
                this.oList.style.top = this.top + "px";
                this.oList.style.left = this.left + "px";
                this.oList.innerHTML = myArr[num % len];
            };

            // 设置方法，让数组里的内容动起来，即top值发生变化
            this.topChange = function() {
                // 备份this,因为this进入定时器之后就成window了
                var self = this;
                // 用变量接受top最初始的值
                var initTop = self.top;
                // 开启定时器
                this.timer = setInterval(function() {
                    self.top--;
                    if (self.top == (initTop - 150)) self.die();
                    self.oList.style.top = self.top + "px";
                }, 10);
            }

            this.die = function() {
                // 清理定时器
                clearInterval(this.timer);
                // 清除div
                document.body.removeChild(this.oList);
            }

            this.init();
            this.topChange();
        }

        // 页面点击时
        window.onclick = function(ev) {
            var ev = ev || event; //事件监听
            new mouseEvent(ev.clientY, ev.clientX); // 点击时获取到页面顶端和左边的位置
            num++;
        }
    </script>
</body>

</html>

打开页面后单击，效果就会出现啦。我看好多博客或者个人网站都有这种效果，就自己实现了一下 感觉还不错

效果图如下

数组里面的内容会跟着鼠标的点击出现，上飘一段时间后自动清理。是不是很好玩呀！！！！

posted @ 2019-11-12 11:42  安雁-zzq  阅读(325)  评论(0)    收藏  举报