JQ下雪特效

JQuery 张梦琰
文章标签: JQuery 下雪特效
104

用JQ写下雪特效,设置完CSS样式背景颜色去除边距后导入JQ然后引入雪花图片,在定时器函数里setInterval用随机数Math.random()设置图片大小,在用$(window).width()获取屏幕的宽,用屏幕的宽减去图片大小得到随机的left值用css设置图片。然后用屏幕的高度-雪花大小$(window).height()-size得到雪花移动距离,设置一个自定义动画animate加上雪花移动距离top就可以下雪了。代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

body{background-color: #000000;margin: 0;/* 去掉自带的外边距 */}

img{position: absolute;}

</style>

</head>

<body>

//引入JQ

<script src="JQuery3.6min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//开启定时器添加雪花图片

setInterval(function(){

var img = $("<img src='雪花.png'>");

$("body").append(img);//插入指定内容。

//设置雪花的尺寸20- 40px

//0-20 + 20

var size = parseInt(Math.random())+20;

img.css("width",size+"px");

//得到屏幕宽度

var w = $(window).width();

//取值范围应该是0-屏幕宽度-雪花宽度

var left =parseInt(Math.random()*(w-size));

//把得到的随机1eft给到图片

img.css("left",left+"px");

//添加雪花移动的动画

//得到雪花移动的距离 = 屏幕高度-雪花尺寸

var top = $(window).height()-size;

img.animate({"top":top+"px"},size*100)/* .fadeOut(1000,function(){

//当动画完成时执行此代码

img.remove();

//console.log($("img").length);

}); */

},10)

</script>

</body>

</html>

雪花图片:

雪花.png

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :