用js写一个功德木鱼

最新推荐文章于 2024-01-23 17:58:46 发布

做个温暖的太阳

最新推荐文章于 2024-01-23 17:58:46 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq973302682/article/details/127882746

版权

功德木鱼

首先找一张木鱼的图片

把图片放进网页里面，并把背景调成黑色

写一个“功德+1” 并隐藏它



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>功德木鱼</title>
</head>
<script type="text/javascript" src="./jq.js"></script>

<body style="background-color: black;">
<div style="margin-top: 200px;margin-left: 30%;">
<!-- 木鱼 -->
	<img style="height: ;"  src="./muyu.png" id="muyu">
<div id="gongde" style="font-size: 50px;color: white;position: absolute;top: 190px;right: 30%;display: none;">
	<span>功德</span><span>+</span><span id="num">1</span>
</div>

</body>
</html>

写js


//这里用来jq ，别忘了在上面引入jq
//是鼠标按下 图片缩小 显示 功德+1
var myImg = document.getElementById('muyu');
$("#muyu").mousedown(function () {
	myImg.width = myImg.width/1.1;
	myImg.height = myImg.height/1.1;
	$("#gongde").show();
});
//是鼠标抬起 图片放大 隐藏 功德+1
$("#muyu").mouseup(function () {
	myImg.width = myImg.width*1.1;
	myImg.height = myImg.height*1.1;
	$("#gongde").hide();
});

效果有点僵硬，但是实现简单，感兴趣自己试一试；

完整代码


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>功德木鱼</title>
</head>
<script type="text/javascript" src="./jq.js"></script>

<body style="background-color: black;">
<div style="margin-top: 200px;margin-left: 30%;">
<!-- 木鱼 -->
	<img  src="./muyu.png" id="muyu">
	
</div>
<div id="gongde" style="font-size: 50px;color: white;position: absolute;top: 190px;right: 30%;display: none;"><span>功德</span><span>+</span><span id="num">1</span></div>

</body>
<script type="text/javascript">
$("#muyu").mousedown(function () {
	myImg.width = myImg.width/1.1;
	myImg.height = myImg.height/1.1;
	$("#gongde").show();
});

$("#muyu").mouseup(function () {
	myImg.width = myImg.width*1.1;
	myImg.height = myImg.height*1.1;
	$("#gongde").hide();
});
</script>
</html>

在这里插入图片描述