js雪花特效代码讲解(html雪花特效代码源码)
求网页制作雪花飘落效果的代码
下面是雪花飘落的js代码
拷进去就好了，或者调用！！！！
script language="JavaScript"
!--
N =20;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;
iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+7);
}
if (V){
for (i = 0; i N; i++)
{document.write("LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"';z-index: 1font color=white size=3 face='Wingdings'T/font/LAYER")}
}
else{
document.write('div style="position:absolute;top:0px;left:0px;z-index: 1"');
document.write('div style="position:relative;z-index: 1"');
for (i = 0; i N; i++)
{document.write('div id="si" style="position:absolute;z-index: 1;top:0;left:0;width:'+M[i]+';height:'+M[i]+';font-size:'+M[i]+'"font color=white size=3 face="Wingdings"T/font/div')}
document.write('/div/div');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i N; i++){
sy=S[i];
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+7);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',40);
}
snow()
//--
/script
谁能帮我把http://mall.jd.com/index-1000001225.html这个页面里的flash雪花代码提出来
var sceneWidth =550;//定义场景的宽
var sceneHeight=400;//定义场景的高
var sideDisWidth = Stage.width/2-sceneWidth/2;//定义变量,雪花的横向位移范围
var sideDisHeight = Stage.height/2-sceneHeight/2;//定义变量,雪花的纵向位移范围
var snowNum = 150;//定义雪花的数量
var snowSpace:MovieClip = _root.createEmptyMovieClip("room", 1);//声明一个空影片剪辑snowSpace.
function addMasker() {//声明addMasker函数,执行两项工作.1是画外边框,2是画雪花景
_root.createEmptyMovieClip("masker", -2);//创建空影片剪辑masker，层深-2.任务是为舞台画外边框,并填充颜色
with (masker) {//设置masker的属性。
lineStyle(1, 0xcccccc, 100);//设置线条颜色
beginFill(0x000000, 0);//绘制矩形闭合路径，并填充灰色,透明度为0．
moveTo(sideDisWidth, sideDisHeight);//绘制起点
lineTo(sideDisWidth+sceneWidth, sideDisHeight);//绘制的右上角点的位置
lineTo(sideDisWidth+sceneWidth, sideDisHeight+sceneHeight);//绘制的右下角点的位置
lineTo(sideDisWidth, sideDisHeight+sceneHeight);//绘制的左下角点的位置
lineTo(sideDisWidth, sideDisHeight);//绘制的左上角点的位置
endFill();//结束绘制
}
createSnow();
}
function createSnow() {//定义一个匿名函数，完成声明一个雪花MC,雪花半径,循环画雪花
var n = 0;//局部变量n=0
while (nsnowNum) {//在0到150数量范围循环画雪花
var snow:MovieClip = snowSpace.createEmptyMovieClip("s"+n, n);//声明snowSpace剪辑由"s"+n个snow组成
var radius:Number = Math.random()*3;//定义雪花半径大小
drawSnow(snow, radius);//把snow, radius把参数传递给drawSnow函数
n++;
}
}
function drawSnow(snow:MovieClip, radius:Number) {//定义一个匿名函数，画一个雪花
var p = radius*.9;//局部变量P,用来定义雪花大小的坐标值
with (snow) {//设置snow这个对象的动作.画雪花圆形白色填充
colors = [0xCCCCCC, 0xFFFFFF];//设置雪花的颜色
alphas = [100, 100];//设置透明度
ratios = [0, 255];//采样处的宽度的百分比
matrix = {matrixType:"box", x:-Math.random()*2*radius, y:-Math.random()*2*radius, w:2*radius, h:2*radius, r:(90/180)*Math.PI};//一个变形矩阵
beginGradientFill("radial", colors, alphas, ratios, matrix);// 设置填充色.
curveTo(p, -p, radius, 0);//定义点坐标,画雪花
curveTo(p, p, 0, radius);
curveTo(-p, p, -radius, 0);
curveTo(-p, -p, 0, -radius);
endFill();//结束
}
snowProperty(snow, sceneWidth, sceneHeight);//把参数传递给snowProperty
}
function snowProperty(snow, w, h) {//定义一个匿名函数，一个雪花如何下降
snow._x = sideDisWidth+Math.random()*w;//根据可编辑的宽及0和1中的任意一个数乘雪花宽计算雪花的X轴起始位置
snow._y = sideDisHeight+Math.random()*h;//根据可编辑的高及0和1中的任意一个数乘雪花高计算雪花的Y轴起始位置
snow._rotation = Math.random()*120+30;//设置旋转角度.有立体感.雪花的旋转程度为0和1中的任意一个数乘120+30
snow.stepX = Math.cos((snow._rotation*Math.PI)/180);//雪花横向位移.用计算余弦(旋转角度*常数3.14)/180)
snow.stepY = Math.random()*2+1;//雪花纵向位移.为0和1中的任意一个数*2-1
setInterval(snowFall, 30, snow); //每隔0.5秒调用一次,由snowFall完成
}
function snowFall(snow) {//定义一个匿名函数，该函数为大雪花降落位移范围
snow._x += snow.stepX;//横向下落位移
snow._y += snow.stepY;//纵向下落位移
if (snow._xsideDisWidth) {//如果横向位移不超出sideDisWidth值
snow._x = sideDisWidth+sceneWidth;//为雪花的横坐标附值
}
if (snow._xsideDisWidth+sceneWidth) { //如果雪花的横向坐标大于所附的值
snow._x = sideDisWidth; //横向位移再回到初始点
}
if (snow._ysideDisHeight+sceneHeight) {//如果雪花的纵向坐标大于所附的值
snow._y = sideDisHeight;//纵向位移再回到初始点
}
}
addMasker();
淘宝里首页飘雪花 怎么弄啊 js代码放在哪里啊 本人小白 希望大神详解.....
div class="J_TWidget" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'user-crzysj','contentCls':'user-crzysjii','autoplay':true}" data-widget-type="Carousel" style="position:relative;"ul class="user-crzysjii" style="display: none; width: 999999px; left: 0px; position: absolute;"li class="-_-switchable-panel-internal535 ks-switchable-panel-internal998" style="width: 475px; height: 800px; display: block; float: left;" /li/ulul class="user-crzysj"li class="-_-switchable-trigger-internal534 ks-switchable-trigger-internal997 tshop-psm-shop-ww-hover" style="width:475px;height:800px;right:50%;margin-right:505px;"embed allownetworking="all" allowscriptaccess="never" flashvars="scene=taobao_shop" height="1000" name="flashfirebug_1387778983714" src="" type="application/x-shockwave-flash" width="475" wmode="transparent"/li/ul/divdiv class="J_TWidget" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'user-crzysj','contentCls':'user-crzysjii','autoplay':true}" data-widget-type="Carousel" style="position:relative;z-index:99;"ul class="user-crzysjii" style="display: none; width: 999999px; left: 0px; position: absolute;"li class="-_-switchable-panel-internal635 ks-switchable-panel-internal1108" style="width: 475px; height: 800px; display: block; float: left;" /li/ulul class="user-crzysj"li class="-_-switchable-trigger-internal634 ks-switchable-trigger-internal1107 tshop-psm-shop-ww-hover" style="width:475px;height:800px;left:50%;margin-left:505px;"embed allownetworking="all" allowscriptaccess="never" flashvars="scene=taobao_shop" height="1000" name="flashfirebug_1387778983652" src="" type="application/x-shockwave-flash" width="475" wmode="transparent"/li/ul/div
直接在首页添加个自定义模块 编辑 点两个箭头的那个编辑代码模式 然后复制代码放进去 确定就好！
利用JS给网页添加雪花飘落的效果
1、修改部分如下：
html
?head
??script?src="?Demo/jsized.snow.min.js"?type="text/javascript"/script????????
script
????/**
?????*?This?function?takes?2?arguments
?????*?First?is?the?path?to?the?directory?with?snowflake?images
?????*?Second?is?the?maximum?number?of?snowflakes,?please?do?not
?????*?set?this?number?above?60?as?it?will?impact?the?performance
?????*/
????createSnow("",?60);//目录改为当前目录
/script
?/head
?body
??测试
?/body
/html
2、在该网页目录?下?新添加?四张雪花图片?命名规则（snow0.gif?snow1.gif?snow2.gif?snow3.gif）
圣诞节的代码
圣诞节代码如下：
1. 使用canvas功能绘制的简单圣诞树，在绘图板中绘制下面这个图形并不算什么难事，但是使用代码来生成这个圣诞树却需要一定的HTML5基础。
下面这个图形使用HTML5中的canvas标签来绘制，如果你熟悉HTML5，这对你来说轻而易举。
2. 雪花效果。jQuery的出现，让各种动画效果变得更加容易。比如，你可以通过jQuery、jQuery.snow.js插件以及少量的代码，就可以让页面中飘舞这雪花。
3. 一个非常漂亮的圣诞贺卡。该贺卡通过Construct2制作，然后通过c2runtime.js使得该贺卡可以直接在网页中运行。Construct2是一款用来制作HTML5应用的软件，拥有一个清晰直观、支持“拖拽”操作的开发环境，即使你没有任何编程经验也能开发自己的HTML5应用。
圣诞节：基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。
5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。
圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。
雪花飘落的JS代码
N是管雪花的数量，Y是雪花下落的速度，(document.layers)?window.innerHeight:window.document.body.clientHeight;是雪花下落的尺寸，可以改为=(document.layers)?window.innerHeight+100:window.document.body.clientHeight;+100，下落尺寸加大100。