JS如何实现小星星特效-创新互联

这篇文章将为大家详细讲解有关JS如何实现小星星特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

巴里坤哈萨克ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

鼠标点击窗口实现如图效果：
看起来是不是很像小星星呀

JS如何实现小星星特效

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body >
 <!-- 
 1、鼠标点击 window
 2、获取鼠标位置
 3、创建img
 4、设置 src
 5、设置图片位置（图片定位，设置样式）
 6、图片随机大小
 7、插入body
 -->
 <script type="text/javascript">
 // 鼠标点击window
 window.onclick=function(e){
 // 创建img
 let img=document.createElement("img");
 // 设置src
 img.setAttribute("src","timg.gif");
 // 设置图片大小随机
 let w=Math.random()*50+50;
 img.setAttribute("height",w);
 // 图片位置,绝对定位
 img.style.position="absolute";
 
 img.style.left=(e.clientX-w/2)+"px";
 img.style.top=(e.clientY-w/2)+"px";
 
 // 将图片插入body
 document.body.appendChild(img);
 
 }
 
 </script>
 </body>
</html>

素材

JS如何实现小星星特效

关于“JS如何实现小星星特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

当前题目：JS如何实现小星星特效-创新互联
分享地址：https://www.cdcxhl.com/article32/dojisc.html

成都网站建设公司_创新互联，为您提供软件开发、ChatGPT、电子商务、标签优化、虚拟主机、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容