圣诞下雪效果
2013-12-21 15:04
363 查看
[JavaScript]代码 01 jQuery(document).ready(function () { 02 var snow = { 03 init:function(l,t){ 04 this.winW = $(window).width() - 40; 05 this.winH = $(window).height(); 06 this.oSpan; 07 this.left = l || ($(window).width() - 530)/2; 08 this.top = t || (this.winH - 450) / 2; 09 this.position = snow.heart(this.left,this.top,200); 10 }, 11 heart:function(x,y,v){ 12 var num = Math.floor(760 / 38); 13 var a = v || 100; 14 var iX; 15 var iY; 16 var arr = []; 17 //循环输出心形状 18 for(var i = -400;i < 360; i++){ 19 if (i % num == 0) { 20 iX = x + a * 1.3; 21 iY = y + a * 0.25; 22 arr.push({"left":iX - a * (1 - Math.sin(i * Math.PI / 360)) * Math.cos(i * Math.PI / 360) + "px","top":iY - a * (1 - Math.sin(i * Math.PI / 360)) * Math.sin(i * Math.PI / 360) + "px"}) 23 } 24 }; 25 return arr; 26 }, 27 randomPos:function(winW){ 28 return Math.floor(Math.random() * winW); 29 }, 30 speed:function(n){ 31 return Math.round(Math.random() * n + 1000); 32 }, 33 drop: function(obj,index,bol){ 34 if(bol){ 35 var ix = this.position[index].left; 36 var iy = this.position[index].top; 37 obj.animate({ 38 top: iy, 39 left: ix 40 },snow.speed(8000)); 41 }else{ 42 obj.animate({ 43 top:this.winH + "px" 44 },snow.speed(8000),function(){ 45 $(this).css({ 46 top:"-40px" 47 }); 48 snow.drop($(this)); 49 }); 50 } 51 }, 52 render : function(num,callback){ 53 var winW = $(window).width() - 40; 54 var winH = $(window).height(); 55 var oSpan; 56 var str = ''; 57 var el = $("body"); 58 for (var i = 0; i < num; i++) { 59 str += '<span class="snow-el" style="left:'+snow.randomPos(this.winW)+'px">*</span>'; 60 }; 61 el.append(str); 62 setTimeout(function(){ 63 oSpan = $(".snow-el"); 64 if(callback){ 65 callback(oSpan); 66 } 67 },0); 68 } 69 }; 70 snow.init(null,400); 71 snow.render(100,function(obj){ 72 obj.each(function(i,element){ 73 var index = i % 38; 74 snow.drop($(this),index,false) 75 }) 76 }); 77 });
[2].[代码] [CSS]代码
view sourceprint?01 <style type="text/css">02 html,body {03 background-color: #000;04 overflow: hidden;05 }06 .snow-el {07 color: #fff;08 font-size: 40px;09 font-family: "arial";10 position: absolute;11 top: -40px;12 opacity: .9;13 text-shadow: 0 0 3px #fff;14 -moz-animation:animations 2s ease infinite;15 -webkit-animation:animations 2s ease infinite;16 animation:animations 2s ease infinite;17 }18 @-webkit-keyframes animations{19 100%{transform:rotate(360deg);}20 }21 @-webkit-keyframes animations{22 100%{transform:rotate(360deg);}23 }24 @keyframes animations{25 100%{transform:rotate(360deg);}26 }2728 </style>
相关文章推荐
- PS给没有下雪的图片加上下雪的效果教程
- 圣诞节网页下雪效果代码
- Silverlight圣诞下雪动画及其扩展应用的实现
- 使用JavaScript和Canvas实现下雪动画效果
- javascript实现下雪效果【实例代码】
- 【Cocos2d-x游戏引擎开发笔记(11)】粒子系统----实现下雪效果
- 雪花特效JS代码(网站下雪效果)
- Javascript面向对象例子--下雪效果
- 自定义View下雪效果
- 【Cocos2d-x游戏引擎开发笔记(11)】粒子系统----实现下雪效果
- 每天学一点flash(59) 下雪效果
- HTML5 Canvas绘制的下雪效果
- C语言如何 实现 下雪效果
- 今年最后一场“雪”:下雪效果讲解
- 【Cocos2d-x游戏引擎开发笔记(11)】粒子系统----实现下雪效果
- 每天学一点flash(59) 下雪效果
- Cocos2d-x粒子系统 -- 实现下雪效果
- JS+Canvas 实现下雨下雪效果
- JavaScript实现下雪(Snow)效果
- jQuery页面下雪效果(支持IE7+,圣诞节专用