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>
打开页面后单击，效果就会出现啦。我看好多博客或者个人网站都有这种效果，就自己实现了一下 感觉还不错
效果图如下
数组里面的内容会跟着鼠标的点击出现，上飘一段时间后自动清理。是不是很好玩呀！！！！
