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

更新時間：2019年12月24日 08:52:17 作者：顧一大人

這篇文章主要為大家詳細介紹了JS實現(xiàn)小星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body style="background-color: #000000;">
 <!-- 
 1、鼠標點擊 window
 2、獲取鼠標位置
 3、創(chuàng)建img
 4、設置 src
 5、設置圖片位置（圖片定位，設置樣式）
 6、圖片隨機大小
 7、插入body
 -->
 <script type="text/javascript">
 // 鼠標點擊window
 window.onclick=function(e){
 // 創(chuàng)建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>

素材

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
小星星

相關(guān)文章

JS數(shù)組及對象遍歷方法代碼匯總
這篇文章主要介紹了JS數(shù)組及對象遍歷方法代碼匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
js如何根據(jù)id刪除數(shù)組中對象
這篇文章主要介紹了js如何根據(jù)id刪除數(shù)組中對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
JavaScript的Number對象的toString()方法
toString()方法可以把Number對象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對象的toString()方法，對javascript對象方法相關(guān)知識感興趣的朋友一起學習吧
2015-12-12
javascript將DOM節(jié)點添加到文檔的方法實例分析
這篇文章主要介紹了javascript將DOM節(jié)點添加到文檔的方法,對比分析了javascript的兩種節(jié)點創(chuàng)建的方法,涉及javascript節(jié)點操作及運行時間計算的相關(guān)技巧,需要的朋友可以參考下
2015-08-08
js使用cookie記錄用戶名的方法
這篇文章主要介紹了js使用cookie記錄用戶名的方法,通過完整實例形式分析了JavaScript針對cookie的創(chuàng)建、賦值及刪除等操作技巧,以及通過cookie記錄用戶登錄信息的方法,需要的朋友可以參考下
2015-11-11
JS中使用正則表達式g模式和非g模式的區(qū)別
這篇文章給大家詳細介紹了JS中使用正則表達式g模式和非g模式的區(qū)別，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-04-04
Bpmn.js activiti 流程編輯器詳細教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個步驟、條件和流程間的關(guān)系,說明關(guān)于bpmn.js的一些事件, 通過本文你可以了解到,感興趣的朋友一起看看吧
2023-10-10
js中數(shù)組排序sort方法的原理分析
這篇文章主要介紹了js中數(shù)組排序sort方法的原理,以實例形式分析了sort排序方法的運行機制,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-11-11
JavaScript?中的數(shù)據(jù)類型Number
這篇文章主要介紹了JavaScript?中的數(shù)據(jù)類型Number，Number?類型使用?IEEE?754?格式表示整數(shù)和浮點值，下文相關(guān)詳細資料介紹，需要的小伙伴可以參考一下
2022-04-04
實例學習JavaScript讀取和寫入cookie
本篇內(nèi)容主要給大家通過實例講述了JavaScript讀取和寫入cookie的相關(guān)知識點，有這方面需要的朋友參考下吧。
2018-01-01