欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现开关灯效果案例

程序员文章站 2022-05-29 20:48:07
...

效果展示

点击界面上的开灯关灯按钮,可以实现背景的调暗。方便晚上阅读。

开灯:
jQuery实现开关灯效果案例
关灯:
jQuery实现开关灯效果案例

分析

这个功能很简单,其实就是利用jQuery实现把背景色更改为黑色和白色,可以在两者之间进行切换。

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开关灯案例</title>

		<style type="text/css">
			#img1 {
				display: block;
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<button id="btn1" type="button">开灯</button>
		<button id="btn2" type="button">关灯</button>
		<br>
		<img id="img1" src="imgs/demo1.JPG">
	</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 给button1添加事件,把背景色设置为白色
	$('#btn1').click(function() {
		$('body').css("background-color", "white");
	});
	// 给button2添加事件,把背景色设置为黑色
	$('#btn2').click(function() {
		$('body').css("background-color", "black");
	});
</script>

END. 如果你不沉下心来认真练习,所有的阅读都是白费的。