不知道大家有没有想把自己网站做得比较炫酷的想法,而当访客进入网站,鼠标出现一些特效,不也很能抓住用户眼球嘛?
今天,徐伟轩为大家介绍一款网页特效代码,粒子跟随鼠标移动的效果。
下面为大家分享代码:
HTML代码可以简略使用多个
重点在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,因为,当鼠标点击后就会卡段,并且网页上出现一段鼠标移动的部分轨迹色块,甚是尴尬,有想再延伸或者修改的朋友可以再具体研究。
可以考虑做成鼠标点击特效消失,再点击一次特效恢复的,这样会不会更好一点呢?
徐伟轩博客|不只关注网站设计开发|不定期分享网站模板的自媒体
https://letus.top/archives/17.html(转载时需注明本文出处及文章链接)
如需转载或刊登,请联系我们获得授权。
如何修改iframe里的css样式及跨域问题讲解
2,504 阅读 - 09/14网页HTML如何实现页面自适应,适配手机屏幕
2,476 阅读 - 10/24分享带缩略图的网页链接到微信朋友圈[方法]
2,373 阅读 - 10/23网页里点击A标签没有反应怎么办?
1,548 阅读 - 04/15关于微信里已停止访问该网页的解决办法
1,177 阅读 - 09/24一行代码将你网站封装成微信小程序?
1,171 阅读 - 05/12SablogX博客安装出现反复检验数据库的错误解决方案
727 阅读 - 03/03写博客有个卵用?
622 阅读 - 10/01