jquery实现全屏雪花飘落

PROMULGATOR

ymfever

浙江省杭州市顶尚网络文化会所

← jquery的tab栏

→ 纯CSS3实现单选框

相关代码

jQuery轮播图

jquery进度条

jQuery轮播图

jQuery轮播图

jQuery随机数生成

Html

Css

Js

* {
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
}
body {
	background-color:#000;
}

var minSize = 5; //雪花的最小的尺寸
var maxSize = 50; //雪花最大的尺寸
var time = 50; //时隔多长时间产生一个雪花,值越小,雪越大.
var flake = $('<div></div>').css('position', 'absolute').html('*'); //创建一个盒子,设置绝对定位,创建雪花放进去.
$(function() { //运用jquery设置入口函数
    setInterval(function() { //设置定时器
        var body = $("body"); //将body由dom元素转为jQuery对象
        var width = $(document).width(); //获取文档宽度
        var height = $(document).height(); //获取文档高度
        var startLeft = Math.random() * width; //设置雪花起始left位置
        var endLeft = Math.random() * width; //设置雪花结束left位置
        var flakeSize = maxSize * Math.random(); //设置雪花大小
        var flakeOpacity = 0.3 + Math.random() * 0.3; //设置雪花透明度
        var endFlakeOpacity = 0.5 + Math.random() * 0.3; //设置运动雪花透明度
        var durationTime = 2000 * Math.random() + 10 * height; //设置运动执行时间
        flake.clone().appendTo(body).css({
            'left': startLeft,
            'font-size': flakeSize,
            'opacity': flakeOpacity,
            'color': "#fff",
            'top': "-50px"
        }).animate({
            'left': endLeft,
            'opacity': endFlakeOpacity,
            'top': height
        },
        durationTime,
        function() {
            $(this).remove(); //克隆雪花并把它放入文档中,设置雪花样式,起始大小,起始雪花透明度,起始雪花颜色,起始雪花位置.调用animate方法设置运动结束位置,运动结束透明度.运动执行时间.落地清除.
        });
    },
    time);
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

jquery实现全屏雪花飘落



代码描述：jquery实现全屏雪花

纯js实现全屏雪花特效。不需要任何插件

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现全屏雪花飘落-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号