基于JavaScript實現(xiàn)飄落星星特效
更新時間：2017年08月10日 09:30:54 作者：愛吃炒飯的逗比小豆豆
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js飄落星星特效的具體代碼，供大家參考，具體內(nèi)容如下
1.效果圖
2.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
position: absolute;
}
body {
background-image: url(img/bg.jpg);
background-size: 100%;
}
</style>
<script>
function Star() {
this.speed=10;
this.img=new Image();
this.img.src="img/star"+parseInt(Math.random()*4+1)+".png";
this.img.style.width=50+'px';
this.img.style.height=50+'px';
this.img.style.top=Math.random()*window.innerHeight+1+'px';
this.img.style.left=Math.random()*window.innerWidth+1+'px';
document.body.appendChild(this.img);
}
Star.prototype.slip=function () {
var that=this;
function move() {
that.img.style.top=that.img.offsetTop+that.speed+'px';
console.log(that.img.offsetTop+"star");
console.log(window.innerHeight+"window");
if(that.img.offsetTop>window.innerHeight){
clearInterval(sh);
that.img.style.height=0;
that.img.style.width=0;
}
}
var sh=setInterval(move,100);
}
setInterval(function () {
for(var i=1;i<5;i++){
new Star().slip();
}
},1000)
</script>
</head>
<body>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用js實現(xiàn)雪花飄落效果
- 用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法
- 使用javascript實現(xiàn)雪花飄落的效果
- JS和JQuery實現(xiàn)雪花飄落效果
- JS實現(xiàn)模擬風(fēng)力的雪花飄落效果
- 原生JS實現(xiàn)的雪花飄落動畫效果
- 下雪了 javascript實現(xiàn)雪花飛舞
- Javascript實現(xiàn)多彩雪花從天降散落效果的方法
- 原生javascript+css3編寫的3D魔方動畫旋扭特效
- JavaScript+html5 canvas實現(xiàn)圖片破碎重組動畫特效
- JS實現(xiàn)的雪花飄落特效示例
相關(guān)文章
javascript簡寫常用的12個技巧（可以大大減少你的js代碼量）
這篇文章主要跟大家分享了javascript簡寫常用的12個技巧，通過這12個技巧可以大大減少你的js代碼量，看懂一種是入門，全懂就是大神，你能知道幾個呢？需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)下吧。2017-08-08
javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法
這篇文章主要介紹了javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法即無法再次打開窗口、第二次打開不了,需要的朋友可以參考下2014-04-04
本文主要介紹了原生Javascript插件開發(fā)實踐思路與代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JS中捕獲console.log()輸出的方法,實例分析了實現(xiàn)獲取console.log輸出的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
怎樣調(diào)用動態(tài)獲取的自定義對象的方法...2006-10-10
這篇文章主要為大家介紹了前端JS可視化學(xué)習(xí)利用向量判斷多邊形邊界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-12-12
詳解javaScript中Number數(shù)字類型的使用
Number和Math都屬于JavaScript中的內(nèi)置對象，Number數(shù)字類型作為基礎(chǔ)數(shù)據(jù)類型，我們在開發(fā)過程中會經(jīng)常用到，包括數(shù)字精度的格式化，還有字符串轉(zhuǎn)換成數(shù)字等操作。本文將詳細講解其用法，感興趣的可以了解一下2022-04-04
為body標(biāo)簽和document.body都添加點擊事件后僅Firefox彈出了兩次
為body標(biāo)簽和document.body都添加點擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。2011-04-04
前端JavaScript實現(xiàn)本地模糊搜索功能的方法實例
對于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗,這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
JavaScript安全加密之禁止別人調(diào)試自己的前端頁面代碼實現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁面代碼實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08