TypechoJoeTheme

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

统计

粒子跟随鼠标移动网页特效

徐伟轩博主
2020-07-14
/
0 评论
/
82 阅读
/
233 个字
/
百度已收录
07/14

不知道大家有没有想把自己网站做得比较炫酷的想法,而当访客进入网站,鼠标出现一些特效,不也很能抓住用户眼球嘛?
今天,徐伟轩为大家介绍一款网页特效代码,粒子跟随鼠标移动的效果。

下面为大家分享代码
HTML代码可以简略使用多个<div></div>

重点在js代码

    window.onload = function() {
    var divs = document.getElementsByTagName("div");
    document.onmousemove = function() {
        divs[0].style.left = event.clientX + "px";
        divs[0].style.top = event.clientY + "px";
        for (var index = divs.length - 1; index > 0; index--) {
            divs[index].style.left = divs[index - 1].style.left;
            divs[index].style.top = divs[index - 1].style.top;
        }
    }
    document.onmouseup = function() {
        document.onmousemove = null;
    }
}

当然这个鼠标移动特效对于想要保持特效的朋友来讲,会出现一定的Bug,因为,当鼠标点击后就会卡段,并且网页上出现一段鼠标移动的部分轨迹色块,甚是尴尬,有想再延伸或者修改的朋友可以再具体研究。

可以考虑做成鼠标点击特效消失,再点击一次特效恢复的,这样会不会更好一点呢?

鼠标特效网页特效网页特效代码
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

本文链接:

https://www.letus.top/archives/17.html(转载时请注明本文出处及文章链接)

如需商业转载或刊登,请联系原作者获得授权。

署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)

评论 (0)

广告位

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云