js下雪效果（原创）

Html

Css

body｛
			height:900px;
			width:100%
		｝

//下雪动效
var minSize = 5; //最小字体
var maxSize = 50; //最大字体
var newOne = 400; //生成雪花间隔
var flakColor = "#fcc"; //雪花颜色
var flak = $("<p class='xh'></p>").css({
    position: "absolute",
    "top": "0px"
}).html("❉"); //定义一个雪花 
var dhight = window.innerHeight; //定义视图高度
var dw = window.innerWidth; //定义视图宽度
setInterval(function() {
    var sizeflak = minSize + Math.random() * maxSize; //产生大小不等的雪花
    var startLeft = Math.random() * dw - 50; //雪花生成是随机的left值
    var startopcity = 0.7 + Math.random() * 0.3; //随机透明度
    var endpositionTop = dhight; //雪花停止top的位置
    var endLeft = Math.random() * dw - 100; //雪花停止的left位置
    var durationfull = 40000 + Math.random() * 3000; //雪花飘落速度不同
    var topv = document.body.offsetHeight - 100
    flak.clone().appendTo($("body")).css({
        "left": startLeft,
        "opacity": startopcity,
        "font-size": sizeflak,
        "color": flakColor
    }).animate({
        "top": topv,
        "left": endLeft,
        "apacity": 0.5
    }, durationfull, function() {
        $(this).remove()
    });
}, newOne);

//糖果
var SminSize = 5; //最小字体
var SmaxSize = 50; //最大字体
var SnewOne = 900; //生成雪花间隔
var Sflak = $("<img src='https://www.jq22.com/newjs/bbt.png' class='xh'></img>").css({
    position: "absolute",
    "top": "0px"
}); //定义一个雪花
var Sdhight = window.innerHeight; //定义视图高度
var Sdw = window.innerWidth; //定义视图宽度
setInterval(function() {
    var Ssizeflak = SminSize + Math.random() * SmaxSize; //产生大小不等的雪花
    var SstartLeft = Math.random() * Sdw - 50; //雪花生成是随机的left值
    var Sstartopcity = 0.7 + Math.random() * 0.3; //随机透明度
    var SendpositionTop = Sdhight; //雪花停止top的位置
    var SendLeft = Math.random() * Sdw - 100; //雪花停止的left位置
    var Sdurationfull = 40000 + Math.random() * 3000; //雪花飘落速度不同
    var Stopv = document.body.offsetHeight - 100
    Sflak.clone().appendTo($("body")).css({
        "left": SstartLeft,
        "opacity": Sstartopcity,
        "font-size": Ssizeflak,
    }).animate({
        "top": Stopv,
        "left": SendLeft,
        "apacity": 0.5
    }, Sdurationfull, function() {
        $(this).remove()
    });
}, SnewOne);

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

立即下载

js下雪效果（原创）

代码描述：创建雪花元素，设置定时下落飘动

更新时间：2022-12-18 22:13:23
可用于圣诞活动

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

YJX8023

相关代码

js下雪效果（原创）

最新