-
好玩的js特效
记录一些好玩的js特效
所有用到的源码mini.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> <script src="./fish.min.js">script> <div id="j-fish-skip"><canvas width="1912" height="150">canvas>div>- 1
- 2
- 3
- 4
- 5
- 6
效果：
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 = $('').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('❄'), 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
效果：
标签云特效
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',//bold fontStyle: 'normal',//italic fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded fontToUpperCase: true }; //var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); $( '#tag-cloud' ).svg3DTagCloud( settings ); } ); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
-
相关阅读:
Android日历提醒增删改查事件、添加天数不对问题
最近进行的一次技术选型（工作流引擎）及相关知识介绍
库存管理方法有哪些？
深入剖析：如何使用Pulsar和Arthas高效排查消息队列延迟问题
【MySQL数据库重点】第二节：MySQL基础知识（基本操作）
网络初识（概念入门）
【以太网硬件十四】以太网的MAC是干什么的？
linux shell环境下处理yml文件
233062C++&QTday5
使用R语言进行简单的主成分分析（PCA）
- 原文地址：https://blog.csdn.net/JGMa_TiMo/article/details/132762842
