当前位置：首页 > news >正文

好玩的js特效

news 2025/9/18 3:39:51

记录一些好玩的js特效

1、鱼跳跃特效

引入jquery:https://code.jquery.com/jquery-3.7.1.min.js
源码如下：

<!--引入jquery-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!--引入跳跃源码-->
<script src="./fish.min.js"></script>
<!-- 这是容器 -->
<div id="j-fish-skip"><canvas width="1912" height="150"></canvas></div>

效果：
在这里插入图片描述

2、下雪花特效

源码如下：

<style>body {background-color: #222222; /* 将背景色改为深灰色或其他深色 */}</style><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>(function ($) {$.fn.snow = function (options) {var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index': '9999','top': '-50px'}).html('&#10052;'),documentHeight = $(document).height(),documentWidth = $(document).width(),defaults = {minSize: 10,maxSize: 20,newOn: 1000,flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */},options = $.extend({}, defaults, options);var interval = setInterval(function () {var startPositionLeft = Math.random() * documentWidth - 100,startOpacity = 0.5 + Math.random(),sizeFlake = options.minSize + Math.random() * options.maxSize,endPositionTop = documentHeight - 200,endPositionLeft = startPositionLeft - 500 + Math.random() * 500,durationFall = documentHeight * 10 + Math.random() * 5000;$flake.clone().appendTo('body').css({left: startPositionLeft,opacity: startOpacity,'font-size': sizeFlake,color: options.flakeColor}).animate({top: endPositionTop,left: endPositionLeft,opacity: 0.2}, durationFall, 'linear', function () {$(this).remove()});}, options.newOn);};})(jQuery);$(function () {$.fn.snow({minSize: 5, /* 定义雪花最小尺寸 */maxSize: 30,/* 定义雪花最大尺寸 */newOn: 300  /* 定义密集程度，数字越小越密集 */});});</script>

效果：
在这里插入图片描述

标签云特效

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签云</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">#tag-cloud{width:640px;height:480px;margin: 50px auto;}
</style>
</head>
<body>
<div class="zzsc-container"><div id='tag-cloud'></div>
</div><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>
<script>$( document ).ready( function() {var entries = [ { label: '人工智能', url: '#', target: '_top' },
{ label: '机器学习', url: '#', target: '_top' },
{ label: '深度学习', url: '#', target: '_top' },
{ label: '神经网络', url: '#', target: '_top' },
{ label: '自然语言处理', url: '#', target: '_top' },
{ label: '计算机视觉', url: '#', target: '_top' },
{ label: '数据挖掘', url: '#', target: '_top' },
{ label: '强化学习', url: '#', target: '_top' },
{ label: '意图识别', url: '#', target: '_top' },
{ label: '数据预处理', url: '#', target: '_top' },
{ label: '模式识别', url: '#', target: '_top' },
{ label: '推荐系统', url: '#', target: '_top' },
{ label: '生成对抗网络', url: '#', target: '_top' },
{ label: '聊天机器人', url: '#', target: '_top' },
{ label: '分类器', url: '#', target: '_top' },
{ label: '回归分析', url: '#', target: '_top' },
{ label: '集成学习', url: '#', target: '_top' },
{ label: '特征工程', url: '#', target: '_top' },
{ label: '知识图谱', url: '#', target: '_top' },
{ label: '语音识别', url: '#', target: '_top' },
{ label: '自动驾驶', url: '#', target: '_top' },
{ label: '增强学习', url: '#', target: '_top' },
{ label: '迁移学习', url: '#', target: '_top' },
{ label: '模型解释性', url: '#', target: '_top' },
{ label: '链接分析', url: '#', target: '_top' },
{ label: '噪声生成', url: '#', target: '_top' },
{ label: '半监督学习', url: '#', target: '_top' },
{ label: '计算智能', url: '#', target: '_top' },
{ label: '区块链', url: '#', target: '_top' },
{ label: '云计算', url: '#', target: '_top' },
{ label: '物联网', url: '#', target: '_top' },
{ label: '虚拟现实', url: '#', target: '_top' },
{ label: '增强现实', url: '#', target: '_top' },
{ label: '混合现实', url: '#', target: '_top' },
{ label: '5G技术', url: '#', target: '_top' },
{ label: '生物技术', url: '#', target: '_top' },
{ label: '网络安全', url: '#', target: '_top' }];var settings = {entries: entries,width: 640,height: 480,radius: '65%',radiusMin: 75,bgDraw: true,bgColor: '#494A5F',opacityOver: 1.00,opacityOut: 0.05,opacitySpeed: 6,fov: 800,speed: 0.2,fontFamily: 'Oswald, Arial, sans-serif',fontSize: '15',fontColor: '#fff',fontWeight: 'normal',//boldfontStyle: 'normal',//italic fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expandedfontToUpperCase: true};//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );$( '#tag-cloud' ).svg3DTagCloud( settings );} );</script>
</body>
</html>

在这里插入图片描述

好玩的js特效

记录一些好玩的js特效 1、鱼跳跃特效引入jquery:https://code.jquery.com/jquery-3.7.1.min.js 源码如下：  <script src"https://code.jquery.com/jquery-3.7.1.min.js"></script>  <s…...

编程日记 2023/9/9 15:37:46

java实现带有html格式和附件的符合RFC822规范的eml格式的信件原文组装

1. 传递html格式的eml信件正文 html传递就是解析成带有< html>标签的字符串在正文中传递即可 From:综合运行平台 to:111qq.com // 重点是格式设置成text/html 编码的话需要设置成UTF-8，不然可能直接在正文中展示html标签，为不是解析成具体的样式…...

编程日记 2023/9/9 15:36:46

如何使用PyTorch训练LLM

推荐：使用 NSDT场景编辑器快速搭建3D应用场景像LangChain这样的库促进了上述端到端AI应用程序的实现。我们的教程介绍 LangChain for Data Engineering & Data Applications 概述了您可以使用 Langchain 做什么，包括 LangChain 解决的问题&#xf…...

编程日记 2023/9/9 15:35:45

uniapp 手机真机测试云打包要是没申请可以使用云打包然后采用测试权限即可

uniapp 手机真机测试打开手机找到手机的版本号点击知道提示 （启动开发者模式） 然后在进行usb的连接打开运行uniapp 到手机基台手机确认即可四， 云打包要是没申请可以使用云打包然后采用测试权限即可...

编程日记 2023/9/9 15:34:44

RTSP流媒体服务器EasyNVR视频平台以服务方式启动异常却无报错，该如何解决？

EasyNVR是基于RTSP/Onvif协议的安防视频云服务平台，可实现设备接入、实时直播、录像、检索与回放、云存储、视频分发、级联等视频能力服务，可覆盖全终端平台（电脑、手机、平板等终端），在智慧工厂、智慧工地、智慧社区、…...

编程日记 2023/9/9 15:33:42

【List篇】使用Arrays.asList生成的List集合，操作add方法报错

早上到公司，刚到工位，测试同事就跑来说"功能不行了，报服务器异常了，咋回事";我一脸蒙，早饭都顾不上吃，要来了测试账号复现了一下，然后仔细观察测试服务器日志，发现报了一个…...

编程日记 2023/9/9 15:32:41

c++的类模板里，可以直接为静态变量赋值么？

一直以来，咱们学的是，给类模板里的静态变量赋值，要在类外面。但对于类常量，则可以直接在定义时赋值。起因是看STL源码时有这么的写法，又验证了一下。但是在类模板里直接定义静态活动变量是不可以的，即去…...

编程日记 2023/9/9 15:31:40

【录用案例】CCF-C类，1/2区SCIEI，3个月14天录用，30天见刊，11天检索

计算机科学类SCI&EI 【期刊简介】IF：5.5-6.0，JCR1/2区，中科院2区【检索情况】SCI&EI 双检（CCF-C类） 【征稿领域】边缘计算、算法与机器学习的结合研究录用案例：3个月14天录用，录用…...

编程日记 2023/9/9 15:30:38

1.完成自定义的记事本文件的保存功能 ------------------------------------------------------------------------- widget.cpp ------------------------------------------------------------------------- #include "widget.h" #include "ui_widget.h"…...

编程日记 2023/9/9 15:29:37

SpotBugs检查java代码：在整数上进行没有起任何实际作用的位操作（INT_VACUOUS_BIT_OPERATION）

https://spotbugs.readthedocs.io/en/latest/bugDescriptions.html#int-vacuous-bit-mask-operation-on-integer-value-int-vacuous-bit-operation 在整数上进行无用的与、异或操作，实质上没有做任何有用的工作。例如：v & 0xffffffff 再例如&…...

编程日记 2023/9/9 15:28:36

javaWeb录入数据异常,mysql显示错误

由于项目,需要输入电脑的mac地址 ,在web页面中进行录入,但是某个同事录入一直有问题,数据查询时使用 in 或者都查询不到通过like %% 可以查询到,非常奇怪,请广大网友不吝赐教. 通过 toHex 进行显示发现数据开头多了 E2808E...

编程日记 2023/9/9 15:27:35

Vue + Element UI 前端篇（十）：动态加载菜单

Vue Element UI 实现权限管理系统前端篇（十）：动态加载菜单动态加载菜单之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。我们在这里就用上一篇准备好的数据格式Mock出模…...

编程日记 2023/9/9 15:26:32

图的应用（最小生成树，最短路径，有向无环图）

目录一.最小生成树 1.生成树 2.无向图的生成树 3.最小生成树算法二.最短路径 1.单源最短路径---Dijkstra（迪杰斯特拉）算法 2.所有顶点间的最短路径---Floyd（弗洛伊德）算法三.有向无环图的应用 1.AOV网（拓扑…...

编程日记 2023/9/9 15:25:30

python正则表达式笔记2

由 \ 和一个字符组成的特殊序列在以下列出。如果普通字符不是ASCII数位或者ASCII字母，那么正则样式将匹配第二个字符。比如，\$ 匹配字符 $. \number 匹配数字代表的组合。每个括号是一个组合，组合从1开始编号。比如 (.) \1 匹配 the the 或…...

编程日记 2023/9/9 15:24:29

matplotlib 的默认字体和默认字体系列

matplotlib 的默认字体和默认字体系列查看默认字体和默认字体系列查看默认字体系列下包含的字体查看 plt.rcParams 设置的所有参数查看所有支持的字体格式设置默认字体方法1：方法2 今天给大家介绍一下 matplotlib 包中的默认字体以及默认字体系列。查看默认字体和…...

编程日记 2023/9/9 15:23:28

STMCUBEMX_IIC_DMA_AT24C64读取和写入

STMCUBEMX_IIC_DMA_AT24C64读取和写入说明： 1、此例程只是从硬件IIC升级到DMA读写，因为暂时存储的掉电不丢失数据不多，一页就可以够用，不用担心跨页读写的问题 2、使用DMA后，程序确实是变快了，但是也要注意…...

编程日记 2023/9/9 15:22:27

wsl2相关问题

磁盘空间 wsl 删除相关文件后，如删除docker 无用的容器和镜像，windows上磁盘仍然无法自动回收空间 （参考：[microsoft/WSL](https://github.com/microsoft/WSL/issues/4699#issuecomment-627133168)） # 如清除无用do…...

编程日记 2023/9/9 15:21:25

使用idea时，光标变成了不能按空格键，只能修改的vim格式，怎么切换回正常光标

情况1 你可能不小心启用了 IntelliJ IDEA 中的 Vim 插件。你可以尝试以下步骤来禁用它： 在 IntelliJ IDEA 中，选择 "File" -> "Settings" （如果你在 macOS 上，选择 "IntelliJ IDEA" -> &quo…...

编程日记 2023/9/9 15:20:24

vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累

这里写目录标题场景效果图功能实现1：html代码功能实现2：css样式功能实现3：js代码补充内容page-break-inside 属性page-break-after属性page-break-before 属性场景最近在写后台管理系统时，遇到一个需求，就是要实现…...

编程日记 2023/9/9 15:19:24

linux C MD5计算

#include <stdio.h> #include <string.h> #include <openssl/md5.h>int main() {char str[] "Hello, world!"; // 需要计算MD5哈希值的字符串unsigned char digest[MD5_DIGEST_LENGTH]; // 存储MD5哈希值的数组MD5((unsigned char*)&str, str…...

编程日记 2023/9/9 15:18:23

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/15 18:06:39

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/8/18 10:21:48

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/11 12:55:00