好玩的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>
<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 = $('').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>
效果：
标签云特效
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>