用js写一个功德木鱼

功德木鱼

首先找一张木鱼的图片

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

写一个“功德+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>

用js写一个功德木鱼相关推荐

【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
[js] 写一个方法遍历指定对象的所有属性
[js] 写一个方法遍历指定对象的所有属性 Object.keys().Object.values()只能遍历对象自有的属性,for in 可以遍历原型中的属性. 个人简介我是歌谣,欢迎和大家一起交 ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...
[js] 写一个 document.querySelector 的逆方法
[js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){if(node.id){return '#'+ nod ...
[js] 写一个方法实现promise失败后自动重试
[js] 写一个方法实现promise失败后自动重试 <!DOCTYPE html> <html lang="en"><head><met ...

用js写一个功德木鱼

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

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

写js

完整代码

用js写一个功德木鱼相关推荐

最新文章

热门文章