版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/S_clifftop/article/details/81144100
之前在看一个老哥的博客看到一个比较骚的特效,就是当鼠标移动,后面跟着一条小尾巴,依次是富强、民主等等,于是自己就尝试写代码实现一下,所以我弄了个原生的js实现方法,如果使用jQuery代码更简单,想要我就写。
要看特效 www.sclifftop.com,使用chrome浏览效果好一点,使用手机的话只有点击的时候才会出现
先上代码
<script>
(function () {
var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var aIndex = 0;
document.onmousemove = function (ev) {
var oEvent = ev ? ev : window.event;
var tSpan = document.createElement('div');
aIndex = (aIndex + 1) % arr.length;
var sTxt = document.createTextNode(arr[aIndex]);
tSpan.appendChild(sTxt);
tSpan.style.left = (oEvent.clientX - 35) + 'px';
tSpan.style.top = (oEvent.clientY - 20) + 'px';
tSpan.style.position = 'absolute';
tSpan.style.width = '34px';
tSpan.style.height = '17px';
tSpan.style.fontWeight = "bold";
tSpan.style.color = "#2B9499";
tSpan.style.fontSize = 20;
tSpan.style.opacity = 0.76;
tSpan.style.zIndex = 100000;
document.body.appendChild(tSpan);
setTimeout(function () {
document.body.removeChild(tSpan);
}, 380)
}
})();
</script>
稍微解释一下:
1、首先使用的是立即执行函数,这个表示直接调用执行
2、然后添加了事件监听onmousemove
,当鼠标移动时就执行
3、aIndex
每次加1,取arr
元素,你也可以写成随机来取,要放到监听外,不然每次都会置0,就只能取“民主”
4、首先使用document.createElement()
来创建div
元素,然后使用document.createTextNode()
来创建新文本节点,参数是要插入的文本,然后将文本节点插入div
,然后把div
插入body
5、然后就是对一些样式的修改,对文本样式修改不要对sTxt
来改,对div
来改,还有zIndex
表示堆叠顺序,越大越靠前
6、也设了一个定时器,380ms移除插入body
的div
元素,不然就会一直存在
7、如果太烦,可以将onmousemove
换成onmousedown
之类的事件,这样就会变成点击的时候出现,试一下