用js实现开花效果

最新推荐文章于 2023-02-02 11:15:22 发布

11-phpmin

最新推荐文章于 2023-02-02 11:15:22 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：基础

本文链接：https://blog.youkuaiyun.com/wangmin_12/article/details/8221541

基础专栏收录该内容

23 篇文章

订阅专栏

这段代码演示了如何使用JavaScript在网页上实现一个美观的开花特效。通过定义不同帧的花图片，利用定时器控制动画帧切换，实现了花朵随机位置绽放并自动隐藏的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>JavaScript实现很漂亮的开花特效 - www.unimagical.com</title>
</head>
<body>
<script language="JavaScript">
var numberofblossoms=15 //数量
var openblossomspeed=200 //速度
var showblossomstime=2 //停留时间

var frame=new Array()
frame[0]=new Image()
frame[0].src="http://www.webdm.cn/images/20091207/flower01.gif"
frame[1]=new Image()
frame[1].src="http://www.webdm.cn/images/20091207/flower02.gif"
frame[2]=new Image()
frame[2].src="http://www.webdm.cn/images/20091207/flower03.gif"
frame[3]=new Image()
frame[3].src="http://www.webdm.cn/images/20091207/flower04.gif"
frame[4]=new Image()
frame[4].src="http://www.webdm.cn/images/20091207/flower05.gif"
frame[5]=new Image()
frame[5].src="http://www.webdm.cn/images/20091207/flower06.gif"

var i_nownumberofframes=0
var i_maxnumberofframes=5
var i_numberofblossoms=0

var marginleft=0
var margintop=0
var marginbottom
var marginright

var timer
var thisblossom

showblossomstime=showblossomstime*1000

function positionblossoms() {
if (document.all) {
  marginbottom=document.body.clientHeight-40
    marginright=document.body.clientWidth-40
  for (i=0;i<=numberofblossoms;i++) {
   var randx=Math.floor(marginright*Math.random())
   var randy=Math.floor(marginbottom*Math.random())
   thisblossom=eval("document.all.blossom"+i+".style")
   thisblossom.posLeft=randx
   thisblossom.posTop=randy
   thisblossom.visibility="visible"
  }
  thisblossom=eval("blossom0")
  openblossoms()
}

}

function openblossoms() {
if (document.all) {
  clearTimeout(timer)
  if (i_nownumberofframes<=i_maxnumberofframes) {
   thisblossom.innerHTML="<img src='"+frame[i_nownumberofframes].src+"'>"
   i_nownumberofframes++
   timer=setTimeout("openblossoms()",openblossomspeed)
  }
  else {
   clearTimeout(timer)
   i_nownumberofframes=0
   switchtonextblossom()
  }
}

}

function switchtonextblossom() {
if (document.all) {
  i_numberofblossoms++
  if (i_numberofblossoms<=numberofblossoms) {
   thisblossom=eval("blossom"+i_numberofblossoms)
   openblossoms()
  }
  else {
   setTimeout("hideblossoms()",showblossomstime)
  }
}

}

function hideblossoms() {
if (document.all) {
  for (i=0;i<=numberofblossoms;i++) {
   thisblossom=eval("document.all.blossom"+i+".style")
   thisblossom.visibility="hidden"
  }
}

}

if (document.all) {
for (i=0;i<=numberofblossoms;i++) {
document.write("<div id='blossom"+i+"' style='position:absolute;top:0px;left:0px;visibility:hidden;'><img name='blossomimg"+i+"' src='http://www.webdm.cn/images/20091207/flower01.gif'></div>")
document.clear()
}
}

window.onresize=positionblossoms
window.onload=positionblossoms

</script>

body>
</html>