利用JS给网页添加雪花飘落的效果

JavaScript020

利用JS给网页添加雪花飘落的效果,第1张

1、修改部分如下：

<html>

 <head>

  <script src="http://www.ren3.cn/Snow 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）

<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: nonewidth: 999999pxleft: 0pxposition: absolute"><li class="-_-switchable-panel-internal535 ks-switchable-panel-internal998" style="width: 475pxheight: 800pxdisplay: blockfloat: left"></li></ul><ul class="user-crzysj"><li class="-_-switchable-trigger-internal534 ks-switchable-trigger-internal997 tshop-psm-shop-ww-hover" style="width:475pxheight:800pxright:50%margin-right:505px"><embed allownetworking="all" allowscriptaccess="never" flashvars="scene=taobao_shop" height="1000" name="flashfirebug_1387778983714" src="http://img1.tbcdn.cn/tfscom/T1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" width="475" wmode="transparent"></li></ul></div><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:relativez-index:99"><ul class="user-crzysjii" style="display: nonewidth: 999999pxleft: 0pxposition: absolute"><li class="-_-switchable-panel-internal635 ks-switchable-panel-internal1108" style="width: 475pxheight: 800pxdisplay: blockfloat: left"></li></ul><ul class="user-crzysj"><li class="-_-switchable-trigger-internal634 ks-switchable-trigger-internal1107 tshop-psm-shop-ww-hover" style="width:475pxheight:800pxleft:50%margin-left:505px"><embed allownetworking="all" allowscriptaccess="never" flashvars="scene=taobao_shop" height="1000" name="flashfirebug_1387778983652" src="http://img1.tbcdn.cn/tfscom/T1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" width="475" wmode="transparent"></li></ul></div>

直接在首页添加个自定义模块 编辑 点两个箭头的那个编辑代码模式 然后复制代码放进去 确定就好！

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 (n<snowNum) {//在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._x<sideDisWidth) {//如果横向位移不超出sideDisWidth值

snow._x = sideDisWidth+sceneWidth//为雪花的横坐标附值

}

if (snow._x>sideDisWidth+sceneWidth) { //如果雪花的横向坐标大于所附的值

snow._x = sideDisWidth//横向位移再回到初始点

}

if (snow._y>sideDisHeight+sceneHeight) {//如果雪花的纵向坐标大于所附的值

snow._y = sideDisHeight//纵向位移再回到初始点

}

}

addMasker()