- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
- <title > 萤火虫 </title>
- <style>
- *{padding:0;margin:0}
- HTML,body{width:100%;height:100%;}
- body{background-color:#000;overflow:hidden}
- </style>
- </head>
- <body>
- <script src="http://cdn.bootCSS.com/jQuery/3.1.1/jQuery.JS"></script>
- <script>
- $(function()
- {
- var insect=[];
- var cliWidth=$(document).width();
- var cliHeight=$(document).height();
- for(var i=0;i<50;i++)
- {
- insect[i]=$("<div style='position:absolute;width:10px;height:10px;border-radius:5px;box-shadow:0 0 10px #0C0;background:#0C0'></div>");
- insect[i].initX=parseInt(Math.random()*cliWidth)-insect[i].width();
- insect[i].initY=parseInt(Math.random()*cliHeight)-insect[i].height();
- insect[i].appendTo($("body"));
- insect[i].CSS({"left":insect[i].initX,"top":insect[i].initY})
- }
- function rand(num)
- {
- return parseInt(Math.random()*num);
- }
- function play()
- {
- for(var i=0;i<50;i++)
- {
- insect[i].animate({"top":rand(cliHeight)-10,"left":rand(cliWidth)-10},9000,"linear",function(){play()})
- }
- }
- play();
- })
- </script>
- </body>
- </HTML>
烟花
HTML 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
- <title > 烟花 </title>
- <style>
- *{padding:0;margin:0}
- HTML,body{height:100%;width:100%}
- body{background-color:#000;overflow:hidden}
- </style>
- </head>
- <body>
- <script src="http://cdn.bootcss.com/jQuery/3.1.1/jQuery.JS"></script>
- <script>
- $(function()
- {
- // 不能在定时器里面获取随机数, 因为每隔 30 重新获取随机数
- $(document).click(function(evb)
- {
- // 点击位置
- var ev=evb||event;
- var x=ev.clientX;
- var y=ev.clientY;
- // 烟花颜色
- var color=getColor();
- // 屏幕宽高
- var htHeight=$(document).height();
- var htWidth=$(document).width();
- // 创建放烟花 div
- var div=$("<div></div>");
- div.CSS({"width":"4px","height":"25px","background-color":color,"position":"absolute","left":x,"top":htHeight});
- div.appendTo($("body"));
- // 放烟花
- div.animate({"top":y},function()
- {
- $(this).remove();
- // 创建 30 个 div 然后添加进 body, 火光处理
- var small_div=[];
- for(var i=0;i<30;i++)
- {
- small_div[i]=$("<div style='width:4px;position:absolute;height:4px;top:"+y+"px;left:"+x+"px;background:"+ color+"'></div>");
- small_div[i].appendTo($("body"));
- small_div[i].speedX=parseInt(Math.random()*20-10);
- small_div[i].speedY=parseInt(Math.random()*20-10);
- }
- // 火花
- setInterval(function()
- {
- for(var j=0;j<small_div.length;j++)
- {
- // 如果火花超出跳出此次循环 执行下一次 保证剩余的火花正常执行
- if(small_div[j]==null)continue;
- small_div[j].CSS({"left":small_div[j].position().left+small_div[j].speedX,"top":small_div[j].position().top+small_div[j].speedY});
- small_div[j].speedY = small_div[j].speedY+0.7;
- // 超出屏幕的火花移除 置为空
- if((small_div[j].position().top> htHeight)||(small_div[j].position().left> htWidth )||(small_div[j].position().left<0))
- {
- small_div[j].remove();
- small_div[j]=null;
- }
- }
- },30)
- })
- function getColor()
- {
- var color=parseInt(Math.random()*16777215).toString(16);
- while(color.length<6)
- {
- color="0"+color;
- }
- return ("#"+color);
- }
- })
- })
- </script>
- </body>
- </HTML>
下雪
HTML 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
- <title > 雪花 </title>
- <style>
- *{padding:0;margin:0}
- HTML{width:100%;height:100%;}
- body{background-color:#c1d1ff;height:3000px;overflow-x:hidden}
- div{position:absolute;width:5px;height:5px;border-radius:50%;background-color:#fff;box-shadow:0 0 5px #fff;top:-5px;}
- </style>
- </head>
- <body>
- <script src="http://cdn.bootcss.com/jQuery/3.1.1/jQuery.min.JS"></script>
- <script>
- function snow()
- {
- this.element=$("<div></div>");
- }
- snow.prototype={
- // 插入雪花
- show:function()
- {
- this.element.CSS({"left":this.left});
- $("body").append(this.element);
- return this;
- },
- // 获取随机位置和持续时间
- pos:function()
- {
- var cliX=$(document).width();
- var cliY=$(document).height();
- this.left=rand(cliX);
- this.top=cliY-20;
- this.duration=(rand(10)+2)*3000;
- return this;
- },
- // 初始化下雪位置
- init:function()
- {
- this.element.CSS(
- {
- "left":this.left,
- "top":0
- })
- return this;
- },
- // 下雪
- down:function()
- {
- var self=this;
- this.element.animate(
- {
- "left":this.left,
- "top":this.top
- },this.duration,
- function()
- {
- // 递归 (先将雪花放在最上方, 周而复始)
- self.init().pos().down();// 错误地点
- })
- return this;
- }
- }
- function rand(num)
- {
- return Math.floor(Math.random()*num);
- }
- $(function()
- {
- var snowo=[];
- for(var i=0;i<30;i++)
- {
- snowo[i]=new snow();
- snowo[i].pos().init().show().pos().down();
- }
- })
- </script>
- </body>
- </HTML>
树形动画
HTML 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
- <title > 树形动画 </title>
- </head>
- <body>
- <ul id="nav">
- <li>
主题市场
- <ul>
- <li > 运动派 </li>
- <li > 有车族 </li>
- <li > 生活家 </li>
- </ul>
- </li>
- <li > 特色购物
- <ul>
- <li > 淘宝二手 </li>
- <li > 拍卖会 </li>
- <li > 爱逛街 </li>
- <li > 全球购 </li>
- <li > 淘女郎 </li>
- </ul>
- </li>
- <li > 优惠促销
- <ul>
- <li > 天天特价 </li>
- <li > 免费试用 </li>
- <li > 清仓 </li>
- <li>1 元起拍 </li>
- </ul>
- </li>
- <li > 工具 </li>
- </ul>
- <script src="http://cdn.bootcss.com/jQuery/3.1.1/jQuery.min.JS"></script>
- <script>
- $(function()
- {
- $("li:has(ul)").click(function(event)
- {
- if(this == event.target)
- {
- if($(this).children().is(":hidden"))
- {
- $(this).CSS("list-style-image","url(images/-.gif)").children().show();
- }
- else
- {
- $(this).CSS("list-style-image","url(images/+.gif)").children().hide();
- }
- }
- }).CSS({"list-style-image":"url(images/+.gif)","cursor":"pointer"}).children().hide();
- $("li:not(:has(ul))").CSS({"list-style-image":"none"})
- })
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/18184/6e3acc869351e69d84b9128f810df10f.html