用JavaScript实现网页雪花飘落特效

news2024/10/1 19:33:57

        不知道大家有没有看到过别人的网页有雪花飘落的特效,我当时看到真的觉得好好看,于是乎就去借鉴别人做的特效代码,最终将这个特效成功放到自己做的网页上啦~代码放到下面啦,可以自己设置颜色,雪花形状的大小,雪花的速度,雪花飘落的位置和雪花飘落的速度,只要改一下代码开头的几个参数就可以啦。如果不想飘雪花也可以把雪花改成文字,随机飘雪花可能大家见多了,但是随机飘文字就没这么常见了吧?把下面的代码放到一个文档里,将文档的名字改成snow.js,再在自己写的网页html的开头部分加上这个就好啦!

<script src="./js/snow.js" type="text/javascript"></script>

雪花飘落特效效果如下:

 代码如下:

//~ snow雪花飘落特效
// 设置雪花数量(不建议超过30-40个)
var snowmax = 70
// 设置雪的颜色,可添加任意颜色
var snowcolor = ["#FFDA65","#00AADD","#aaaacc","#a0c4ff","#ccccdd","#caffbf","#bbf7f9","#ffc6ff","#ffd6a5"]
// 设置创建雪花的字体,可添加任意字体
var snowtype = ["Times","Arial","Verdana"]
// 设置创建雪花的字母(推荐:*)
var snowletter = "*"
// 设置下沉速度(建议值范围为0.3到2)
var sinkspeed = 0.6
// 设置雪花的最大大小
var snowmaxsize = 32
// 设置雪花的最小大小
var snowminsize = 12
// 设置下雪区,1:全屏,2:左侧,3:中间,4:右侧
var snowingzone = 1

var snow = []
var marginbottom
var marginright
var timer
var i_snow = 0
var x_mv = []
var crds = []
var lftrght = []
var browserinfos = navigator.userAgent
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/)
var ns6 = document.getElementById && !document.all
var opera = browserinfos.match(/Opera/)
var browserok = ie5 || ns6 || opera
 
function randommaker(range) {
    rand = Math.floor(range * Math.random())
    return rand
}
 
function initsnow() {
    if (ie5 || opera) {
        marginbottom = document.body.scrollHeight - 80
        marginright = document.body.clientWidth - 15
    } else if (ns6) {
        marginbottom = document.body.scrollHeight - 80
        marginright = window.innerWidth - 15
    }
    var snowsizerange = snowmaxsize - snowminsize
    for (var i = 0;i <= snowmax;i++) {
        crds[i] = 0;
        lftrght[i] = Math.random()*15;
        x_mv[i] = 0.03 + Math.random()/10;
        snow[i] = document.getElementById("s"+i)
        snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]
        snow[i].size = randommaker(snowsizerange)+snowminsize
        snow[i].style.fontSize = snow[i].size+'px';
        snow[i].style.color = snowcolor[randommaker(snowcolor.length)]
        snow[i].style.zIndex = 1000
        snow[i].sink = sinkspeed*snow[i].size/5
        if (snowingzone==1) {snow[i].posx = randommaker(marginright-snow[i].size)}
        if (snowingzone==2) {snow[i].posx = randommaker(marginright/2-snow[i].size)}
        if (snowingzone==3) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/4}
        if (snowingzone==4) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/2}
        snow[i].posy = randommaker(2*marginbottom-marginbottom-2*snow[i].size)
        snow[i].style.left=snow[i].posx+'px';
        snow[i].style.top=snow[i].posy+'px';
    }
    movesnow()
}
 
function movesnow() {
    for (var i = 0;i <= snowmax;i++) {
        crds[i] += x_mv[i];
        snow[i].posy+=snow[i].sink
        snow[i].style.left = snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
        snow[i].style.top = snow[i].posy+'px';
 
        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
            if (snowingzone==1) {snow[i].posx = randommaker(marginright-snow[i].size)}
            if (snowingzone==2) {snow[i].posx = randommaker(marginright/2-snow[i].size)}
            if (snowingzone==3) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/4}
            if (snowingzone==4) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/2}
            snow[i].posy = 0
        }
    }
    var timer = setTimeout("movesnow()", 50)
}
 
for (var i = 0;i <= snowmax;i++) {
    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
    window.onload = initsnow
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/128123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新政策|“信息科技”独立设置为新科目

近日&#xff0c;教育部印发义务教育课程方案和语文等16个课程标准(2022年版)。今天&#xff0c;教育部召开新闻发布会&#xff0c;介绍《义务教育课程方案和课程标准&#xff08;2022年版&#xff09;》。 教育部教材局局长田慧生表示&#xff0c;现行义务教育课程方案和课程…

Eth 02 -MAC如何访问PHY

文章目录 1 MII接口概述2 MDIO clause 223 MDIO Clause 45传送门 ==>> AutoSAR入门和实战系列总目录 1 MII接口概述 我们在【Eth 01 - Eth以太网控制器驱动概述和API讲解】已经提到了两个接口:MAC通过MII接口访问PHY芯片。 void Eth_WriteMii(uint8 CtrlIdx, uint8 T…

第二十三讲:神州路由器OSPF多区域路由的配置

实验拓扑图如下所示 操作步骤&#xff1a; 步骤1&#xff1a;连接网络拓扑图。 步骤2&#xff1a;设置计算机的IP地址、子网掩码和网关。 步骤3&#xff1a;配置Router-A的名称及其接口IP地址。 Router_config#hostname Router-A Router-A_config#int fa0/0 Router-A_con…

【HTML】再见2022!一起来写一个响应式跨年倒计时吧(附源码)

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…

excel排序求和:如何统计前几名数据合计 上篇

什么叫做统计前几名合计呢&#xff1f;先看看动画演示吧&#xff1a; 可以看到&#xff0c;数据按照销售数量从高往低排列&#xff0c;选择一个名次&#xff0c;就可以对前几名的销售数量求和。 这类问题在很多与数字排名有关的情况下都用得上&#xff0c;例如对前几名考试成绩…

GitFlow工作流

1.背景介绍 什么是Git工作流&#xff1f; Git工作流你可以理解为工作中团队成员遵守的一种代码管理方案&#xff0c;在Git中有以下几种工作流方案作为方案指导。 1、集中式工作流 2、功能分支工作流 3、Gitflow工作流 4、Forking工作流 2.知识剖析 1、集中式工作流 这…

ANR系列之五:Service类型ANR原理讲解

前言&#xff1a; ANR系列文章一共有有若干篇&#xff0c; 遵循这样的一个顺序&#xff1a; 1.先讲ANR的基本概念以及发生后的流程&#xff1b; 2.四种类型的ANR是如何发生的&#xff1b; 3.该如何排查和解决ANR类型问题。 想看整个系列的文章&#xff0c;可以参考该系列…

在线文档查看器:Gleamtech Document Viewer 6.6.1

DocumentUltimate Document Viewer and Converter for ASP.NET Core, MVC 和 WebForms 查看几乎任何文档类型&#xff08;70 多种文件格式&#xff0c;包括 PDF 和 Microsoft Office&#xff09;。 HTML5 零足迹查看器。在文档类型之间转换。 特征 适用于桌面和移动浏览器的通…

【XR】为挑战性环境优化6DoF控制器追踪

Oculus分享&#xff1a;为挑战性环境优化6DoF控制器追踪 尤其是针对具有挑战性的追踪环境 映维网曾在九月和十一月分享了关于Oculus Constellation追踪系统的相关细节&#xff0c;其中负责AR/VR设备输入追踪的Facebook工程经理安德鲁梅利姆&#xff08;Andrew Melim&#xff…

舆情监测平台都有哪些,舆情监测平台使用工作总结

舆情监测平台(public opinion monitoring platform)是一种用于监测和分析网络上的舆论动态的工具。这些平台通常通过爬取网络上的新闻、博客、论坛、社交媒体等信息来收集数据&#xff0c;并使用自然语言处理技术和数据挖掘技术来分析数据。舆情监测平台常常被用于政府、企业、…

牛客竞赛每日俩题 - Day12

目录 set的插入删除 vector<string>的应用 set的插入删除 数据库连接池__牛客网 [解题思路] 循环接收每组用例&#xff0c;对于每组用例进行如下操作&#xff1a; 1. 依次获取每个状态&#xff0c;如果该状态是"connect"&#xff0c;则将其id插入到set中&…

Adaboost模型的python实现

文章目录介绍Adaboost库参数介绍实例二分类问题多分类问题作者&#xff1a;李雪茸介绍 Adaboost算法是一种集成学习(ensemble learning)方法。在集成学习中&#xff0c;强学习器指的是由多个机器学习模型组合形成的精度更高的模型。而参与组合的模型就被称为是弱学习器。进行预…

数据治理:数据治理之道-数据战略

参考《一本书讲透数据治理》、《数据治理》等 文章目录数据战略定义DAMA对数据战略的定义DCMM对数据战略的定义《一本书讲透数据治理》对数据战略理解数据战略与企业战略、数据架构的关系数据战略的3个要素战略定位短期目标中期目标长期目标实施策略行动计划实施数据战略的5个步…

NFT存储使用NFTUp上传(NFT.Storage)

文章目录NFT存储使用NFTUp上传(NFT.Storage)NFT.StorageNFTUp安装和使用NFT存储使用NFTUp上传(NFT.Storage) NFT.Storage 官网&#xff1a;https://nft.storage/ NFT.Storage&#xff0c;它可以让用户免费使用IPFS与Filecoin存储NFT及元数据内容。 NFT.Storage&#xff0c;…

信息系统业务安全服务资质

信息系统业务安全服务能力评定是指依据《信息化建设企业信息系统业务安全服务能力评定标准》&#xff0c;对信息化建设企业信息系统业务安全服务能力的符合性评价&#xff0c;包括综合条件、财务状况、业绩要求、管理能力、技术实力、人才保障六个方面。通过评定&#xff0c;可…

小黑正在苦于hbase的rowkey的日常积累:md5字符串加密

import hashlib content hello md5hash hashlib.md5(content.encode(utf-8)) md5 md5hash.hexdigest() print(md5)5d41402abc4b2a76b9719d911017c592 参考链接&#xff1a; https://wenku.baidu.com/view/bceba829f22d2af90242a8956bec0975f465a46c?frsogou&wkts167237…

电脑为什么这么卡?6个方法处理电脑卡顿

你是否打开电脑就卡到不行&#xff1f;电脑的开机速度慢&#xff0c;就连打开网页也在转圈圈&#xff0c;一直加载不出来。世界上最痛苦的事莫过于此&#xff0c;想要好好工作&#xff0c;却一直加载不出网页。你知道电脑为什么这么卡吗&#xff1f;其实大多数的原因都在这篇文…

借助 Material Design,帮助您打造更好的无障碍应用 (下篇)

随着时代的发展&#xff0c;"无障碍体验" 对开发者的意义也愈发重大&#xff0c;在上一篇文章中&#xff0c;我们为您介绍了无障碍布局和排版、文案等相关内容。本文将进一步为您介绍图片、声音和运动、实现无障碍的内容。图片图片类型要知道何时以及如何使图片遵循无…

多维尺度MDS案例分析

多维尺度&#xff08;multidimensional scaling, MDS&#xff09;&#xff0c;是一种将研究对象之间距离或者不相似度的直观展示&#xff0c;较为典型的研究对象是地理位置&#xff0c;当然也可以是观点、颜色等任意各类实体或抽象概念&#xff0c;比如茶的口味不相似情况。多维…

MoCo论文:Momentum Contrast for Unsupervised Visual Representation Learning

目录一. 引言二. 背景介绍&#xff1a;对比学习三. 标题和作者四. 动量方式&#xff1a;五. 摘要六. 相关工作七. 结论八. MoCo方法九. MoCo伪代码十. 文章贡献10.1 第一个贡献&#xff1a;如何把一个字典看成队列10.2 文章的第二个贡献&#xff1a;如何使用动量的思想去更新编…