基于JavaScript實(shí)現(xiàn)飄落星星特效

更新時(shí)間：2017年08月10日 09:30:54 作者：愛(ài)吃炒飯的逗比小豆豆

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

本文實(shí)例為大家分享了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>

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

您可能感興趣的文章:

相關(guān)文章

javascript簡(jiǎn)寫常用的12個(gè)技巧（可以大大減少你的js代碼量）
這篇文章主要跟大家分享了javascript簡(jiǎn)寫常用的12個(gè)技巧，通過(guò)這12個(gè)技巧可以大大減少你的js代碼量，看懂一種是入門，全懂就是大神，你能知道幾個(gè)呢？需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)下吧。
2017-08-08
javascript window.open打開(kāi)新窗口后無(wú)法再次打開(kāi)該窗口問(wèn)題的解決方法
這篇文章主要介紹了javascript window.open打開(kāi)新窗口后無(wú)法再次打開(kāi)該窗口問(wèn)題的解決方法即無(wú)法再次打開(kāi)窗口、第二次打開(kāi)不了,需要的朋友可以參考下
2014-04-04
原生Javascript插件開(kāi)發(fā)實(shí)踐
本文主要介紹了原生Javascript插件開(kāi)發(fā)實(shí)踐思路與代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
JS中捕獲console.log()輸出的方法
這篇文章主要介紹了JS中捕獲console.log()輸出的方法,實(shí)例分析了實(shí)現(xiàn)獲取console.log輸出的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04
怎樣調(diào)用動(dòng)態(tài)獲取的自定義對(duì)象的方法
怎樣調(diào)用動(dòng)態(tài)獲取的自定義對(duì)象的方法...
2006-10-10
前端JS可視化學(xué)習(xí)利用向量判斷多邊形邊界
這篇文章主要為大家介紹了前端JS可視化學(xué)習(xí)利用向量判斷多邊形邊界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-12-12
詳解javaScript中Number數(shù)字類型的使用
Number和Math都屬于JavaScript中的內(nèi)置對(duì)象，Number數(shù)字類型作為基礎(chǔ)數(shù)據(jù)類型，我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)經(jīng)常用到，包括數(shù)字精度的格式化，還有字符串轉(zhuǎn)換成數(shù)字等操作。本文將詳細(xì)講解其用法，感興趣的可以了解一下
2022-04-04
為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次
為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。
2011-04-04
前端JavaScript實(shí)現(xiàn)本地模糊搜索功能的方法實(shí)例
對(duì)于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來(lái)做。但是有時(shí)候一些輕量級(jí)的列表前端來(lái)做可以減少ajax請(qǐng)求,在一定程度上提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實(shí)現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下
2021-07-07
JavaScript安全加密之禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08