js實現(xiàn)漫天星星效果
更新時間：2017年01月19日 15:09:38 作者：yangzailu
這篇文章主要為大家詳細介紹了js點擊出漫天的小星星，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了漫天小星星效果的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果圖：
實現(xiàn)代碼：
<html onclick="init(event)">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//點出漫天小星星
//背景色
//給html添加onclick事件
//創(chuàng)建圖片節(jié)點，并追加到body父節(jié)點下
//圖片的隨機大小
function init(e){
//創(chuàng)建圖片節(jié)點（在內(nèi)存中，還看不見）
var imgObj=document.createElement("img");
//追加節(jié)點
document.body.appendChild(imgObj);
//添加屬性
imgObj.src="xingxing.gif";
//添加width屬性
imgObj.width=getRandom(15,85);
//定位
var x=e.clientX? e.clientX : event.clientX;
var y=e.clientY? e.clientY : event.clientY;
imgObj.style.position="absolute";
imgObj.style.left=x - imgObj.width/2+"px";
imgObj.style.top=y- imgObj.width/2+"px";
}
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<body style="background-color:black" >
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實現(xiàn)購物網(wǎng)站商品放大鏡效果
大家在日常生活中都有網(wǎng)購的經(jīng)驗，有的網(wǎng)站會有商品放大鏡功能，效果非常棒，那么基于js代碼是如何實現(xiàn)的呢？下面小編給大家?guī)砹嘶趈s實現(xiàn)購物網(wǎng)站商品放大鏡效果，非常不錯，感興趣的朋友參考下吧2016-09-09
本文主要介紹了用move.js庫實現(xiàn)百葉窗特效的思路與方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
基于JavaScript實現(xiàn)在線網(wǎng)頁煙花效果
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)簡單的在線網(wǎng)頁煙花效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
autojs 螞蟻森林能量自動拾取即給指定好友澆水的實現(xiàn)方法
這篇文章主要介紹了autojs 螞蟻森林能量自動拾取即給指定好友澆水的實現(xiàn)方法，本文通過圖文并茂實例代碼相結(jié)合給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能,結(jié)合實例形式分析了javascript漢字轉(zhuǎn)換成拼音的函數(shù)定義與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了js html制作簡單日歷的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基數(shù)排序是一種根據(jù)數(shù)字位數(shù)的值,對整數(shù)進行排序的算法,本文主要介紹了JS實現(xiàn)基數(shù)排序的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
Typescript中的數(shù)據(jù)類型實例總結(jié)
ts中數(shù)據(jù)類型的定義是重點之一,所以必須明確ts有哪些數(shù)據(jù)類型,下面這篇文章主要給大家介紹了關(guān)于Typescript中數(shù)據(jù)類型的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
今天小編就為大家分享一篇layui+jquery支持IE8的表格分頁方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript 復(fù)雜的嵌套環(huán)境中輸出單引號和雙引號
如果簡單的嵌套一般都是外面用雙引號，則里面用單引號，反之亦同，如果特別負責(zé)的嵌套大家看下如下的方法。2009-05-05