JS實(shí)現(xiàn)小星星特效

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

本文實(shí)例為大家分享了JS實(shí)現(xiàn)小星星特效的具體代碼，供大家參考，具體內(nèi)容如下

鼠標(biāo)點(diǎn)擊窗口實(shí)現(xiàn)如圖效果：
看起來是不是很像小星星呀

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body style="background-color: #000000;">
 <!-- 
 1、鼠標(biāo)點(diǎn)擊 window
 2、獲取鼠標(biāo)位置
 3、創(chuàng)建img
 4、設(shè)置 src
 5、設(shè)置圖片位置（圖片定位，設(shè)置樣式）
 6、圖片隨機(jī)大小
 7、插入body
 -->
 <script type="text/javascript">
 // 鼠標(biāo)點(diǎn)擊window
 window.onclick=function(e){
 // 創(chuàng)建img
 let img=document.createElement("img");
 // 設(shè)置src
 img.setAttribute("src","timg.gif");
 // 設(shè)置圖片大小隨機(jī)
 let w=Math.random()*50+50;
 img.setAttribute("height",w);
 // 圖片位置,絕對(duì)定位
 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>

素材

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題

欄目：JavaScript

下一篇：通過微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例

本文標(biāo)題：JS實(shí)現(xiàn)小星星特效

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9395.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

JS實(shí)現(xiàn)小星星特效

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀