js构造对象实现鼠标单击文本上飘效果
Posted 安雁-zzq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
打开页面后单击，效果就会出现啦。我看好多博客或者个人网站都有这种效果，就自己实现了一下 感觉还不错
效果图如下
数组里面的内容会跟着鼠标的点击出现，上飘一段时间后自动清理。是不是很好玩呀！！！！
以上是关于js构造对象实现鼠标单击文本上飘效果的主要内容，如果未能解决你的问题，请参考以下文章