快捷導(dǎo)航

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

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

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

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

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

代碼如下：

<!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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
小星星

相關(guān)文章

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