一个简单的 jQuery 全局昼夜效果切换示例代码

jQuery代码
来源：站三界导航
76阅读
2023-05-19

<!DOCTYPE html>
<html>
<head>
	<title>jQuery全局昼夜效果切换</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<style type="text/css">
		body {
			background-color: #fff; /* 默认白天背景 */
			color: #333; /* 默认黑色字体 */
			transition: all ease 0.5s; /* 过渡效果 */
		}
		.night-mode {
			background-color: #333; /* 夜间模式背景色 */
			color: #fff; /* 夜间模式字体颜色 */
		}
	</style>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是一段正文。</p>
	<a href="#">这是一个链接</a>
	<button id="night-mode-toggle">切换昼夜模式</button>

	<script type="text/javascript">
		$(function(){
			$("#night-mode-toggle").click(function(){
				$("body").toggleClass("night-mode"); // 切换昼夜模式类名
			});
		});
	</script>
</body>
</html>

在这个示例中，页面上有一个用于切换昼夜模式的按钮，当用户点击按钮时，通过 jQuery 切换 body 元素的类名来实现昼夜模式的切换。同时，CSS 样式中定义了两种不同的颜色方案，根据 body 元素的类名来切换显示不同的颜色方案。这种方法简单易懂，适用于大部分网站的昼夜模式效果。本文结束

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/43220.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：四川高校一教师被曝婚内出轨多名学生，履历曝光，校方通报：辞退

下一篇：情侣生女后分手保姆代养孩子6年，网友“好心人真的太难当了”