小鱼特效与回到顶部功能
效果可参考本网站
你可以将这段代码分开放在你的css、js和html（或者php）文件中，最直接方便的方式是一股脑放在你底部页面的html（或者php）文件中, fish.js文件参考网页底部小鱼游动特效
<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
exit();
} ?>
<div class="flex flex-col lg:mb-16 py-3 dark:dark:text-gray-500"">
<div class="flex flex-col items-center">
<div class="flex flex-row gap-x-1 items-center footer">
<img src="图片路径" alt="动态图片" class="dynamic-image" />
<span><a href="https://beian.miit.gov.cn" target="_blank"> 备案号</a></span>
</div>
</div>
</div>
<style>
.dynamic-image {
height: 2em; /* 图片高度设置为与文本高度相似 */
width: auto; /* 宽度自动调整，保持纵横比 */
}
</style>
<?php $this->footer(); ?>
<script>
<?php $this->options->customScript(); ?>
</script>
<!-- fish特效 -->
<link rel="stylesheet" href="你的鱼特效css文件路径/x.css">
<div id="jsi-flying-fish-container" class="container"></div>
<script src="你的鱼特效js文件路径/x.js"></script>
<script>
window.onload = () => {
RENDERER.init();
}
</script>
<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop">
<div class="back-to-top-container">
<img src="你的图片路径/x.gif" alt="Back to Top" class="back-to-top-img" />
<span class="back-to-top-text">顶部</span>
</div>
</div>
<!-- CSS -->
<style>
/* 回到顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 50px;
right: 30px;
display: none; /* 默认隐藏 */
align-items: center;
cursor: pointer;
z-index: 1000;
}
.back-to-top-container {
position: relative; /* 使内部元素可以进行绝对定位 */
display: inline-block;
}
.back-to-top-img {
height: 90px; /* 图片大小 */
width: auto;
}
/* 提示文本样式，显示在图片顶部 */
.back-to-top-text {
position: absolute;
top: -30px; /* 调整文字的顶部距离 */
left: 50%; /* 水平居中 */
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap; /* 防止文字换行 */
}
/* 鼠标悬停时仍显示提示文本 */
.back-to-top:hover .back-to-top-text {
display: inline-block;
}
/* 页面滚动一定距离后显示按钮 */
.show {
display: flex !important; /* 显示回到顶部按钮 */
}
</style>
<!-- JavaScript -->
<script>
// 显示或隐藏回到顶部按钮的逻辑
window.onscroll = function() {
const backToTopButton = document.getElementById("backToTop");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
backToTopButton.classList.add("show");
} else {
backToTopButton.classList.remove("show");
}
};
// 点击回到顶部按钮，平滑滚动返回顶部
document.getElementById("backToTop").addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
排版后的代码
<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
exit();
} ?>
<div class="flex flex-col lg:mb-16 py-3 dark:dark:text-gray-500">
<div class="flex flex-col items-center">
<div class="flex flex-row gap-x-1 items-center footer">
<img src="图片路径" alt="动态图片" class="dynamic-image" />
<span><a href="https://beian.miit.gov.cn" target="_blank">备案号</a></span>
</div>
</div>
</div>
<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop">
<div class="back-to-top-container">
<img src="https://www.chendk.info/usr/themes/jasmine/5.gif" alt="Back to Top" class="back-to-top-img" />
<span class="back-to-top-text">Top</span>
</div>
</div>
<!-- Fish 特效 -->
<div id="jsi-flying-fish-container" class="container"></div>
<?php $this->footer(); ?>
<script>
// 初始化自定义脚本
<?php $this->options->customScript(); ?>
// 初始化鱼特效
// window.onload = () => {
// RENDERER.init();
// };
window.onload = function() {
if (typeof RENDERER !== 'undefined' && RENDERER.init) {
RENDERER.init();
} else {
console.error("Fish effect failed to load.");
}
};
// 显示或隐藏回到顶部按钮的逻辑
window.onscroll = function() {
const backToTopButton = document.getElementById("backToTop");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
backToTopButton.classList.add("show");
} else {
backToTopButton.classList.remove("show");
}
};
// 点击回到顶部按钮，平滑滚动返回顶部
document.getElementById("backToTop").addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
<!-- Fish 特效 JS -->
<script src="https://www.chendk.info/usr/themes/jasmine/assets/dist/fish.js"></script>
<!-- Fish 特效的样式 -->
<link rel="stylesheet" href="https://www.chendk.info/usr/themes/jasmine/assets/dist/fish-style.css">
<!-- 内联样式 -->
<style>
.dynamic-image {
height: 2em; /* 图片高度设置为与文本高度相似 */
width: auto; /* 宽度自动调整，保持纵横比 */
}
/* 回到顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 50px;
right: 30px;
display: none; /* 默认隐藏 */
align-items: center;
cursor: pointer;
z-index: 1000;
}
.back-to-top-container {
position: relative; /* 使内部元素可以进行绝对定位 */
display: inline-block;
}
.back-to-top-img {
height: 90px; /* 图片大小 */
width: auto;
}
/* 提示文本样式，显示在图片顶部 */
.back-to-top-text {
position: absolute;
top: -30px; /* 调整文字的顶部距离 */
left: 50%; /* 水平居中 */
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap; /* 防止文字换行 */
}
/* 鼠标悬停时仍显示提示文本 */
.back-to-top:hover .back-to-top-text {
display: inline-block;
}
/* 页面滚动一定距离后显示按钮 */
.show {
display: flex !important; /* 显示回到顶部按钮 */
}
</style>
继续
<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
exit();
} ?>
<div class="flex flex-col lg:mb-16 py-3 dark:dark:text-gray-500">
<div class="flex flex-col items-center">
<div class="flex flex-row gap-x-1 items-center footer">
<img src="xxx/x.gif" alt="动态图片" class="dynamic-image" />
<span><a href="https://beian.miit.gov.cn" target="_blank"> xxx</a></span>
</div>
</div>
</div>
<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop">
<div class="back-to-top-container">
<img src="xxx/x.gif" alt="Back to Top" class="back-to-top-img" />
<span class="back-to-top-text">Top</span>
</div>
</div>
<!-- Fish 特效 -->
<div id="jsi-flying-fish-container" class="container"></div>
<?php $this->footer(); ?>
<script>
// 初始化自定义脚本
<?php $this->options->customScript(); ?>
// 初始化鱼特效
// window.onload = () => {
// RENDERER.init();
// };
window.onload = function() {
if (typeof RENDERER !== 'undefined' && RENDERER.init) {
RENDERER.init();
} else {
console.error("Fish effect failed to load.");
}
};
// 显示或隐藏回到顶部按钮的逻辑
window.onscroll = function() {
const backToTopButton = document.getElementById("backToTop");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
backToTopButton.classList.add("show");
} else {
backToTopButton.classList.remove("show");
}
};
// 点击回到顶部按钮，平滑滚动返回顶部
document.getElementById("backToTop").addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
<!-- Fish 特效 JS -->
<script src="xxx/x.js"></script>
<!-- Fish 特效的样式 -->
<link rel="stylesheet" href="xxx/x.css">
<!-- 内联样式 -->
<style>
.dynamic-image {
height: 2em; /* 图片高度设置为与文本高度相似 */
width: auto; /* 宽度自动调整，保持纵横比 */
}
/* 回到顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 50px;
right: 30px;
display: none; /* 默认隐藏 */
align-items: center;
cursor: pointer;
z-index: 1000;
}
.back-to-top-container {
position: relative; /* 使内部元素可以进行绝对定位 */
display: inline-block;
}
.back-to-top-img {
height: 90px; /* 图片大小 */
width: auto;
}
/* 提示文本样式，显示在图片顶部 */
.back-to-top-text {
position: absolute;
top: -30px; /* 调整文字的顶部距离 */
left: 50%; /* 水平居中 */
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap; /* 防止文字换行 */
}
/* 鼠标悬停时仍显示提示文本 */
.back-to-top:hover .back-to-top-text {
display: inline-block;
}
/* 页面滚动一定距离后显示按钮 */
.show {
display: flex !important; /* 显示回到顶部按钮 */
}
</style>
