Suck the cat with code! This paper is participating in[Cat Essay Campaign]
A preface
Hello, this is programmer South.
Today, I’m going to show you how to add meow audio to your cat’s movements.
Here directly take the house of webmaster cat animation template source code to add perfect meow function.
If you already have a code or a template, you can also refer to it for your Kitty meow
Meow, meow, meow
Two “hard” core code
【 HTML code 】
<! -- Find the place you want to add the audio to where the mouse moves to -->
<a href="#" onMouseOver="meow('ear')">
<div>Play the audio where you want to move the mouse</div>
</a>
<! -- -- -- > audio
<audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
<audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
<audio id="cat-q" src="cute.mp3" preload="auto"></audio>
Copy the code【 JS code 】
function meow(name) {
// Meow
switch (name) {
case 'mouse':
// When you touch a small mouth
var rainMusic = document.getElementById("cat-meek");
rainMusic.play();
break;
case 'tail':
// Step on the cat's tail!
var rainMusic = document.getElementById("cat-angry");
rainMusic.play();
break;
case 'ear':
// Touch the cat
var rainMusic = document.getElementById("cat-q");
rainMusic.play();
break; }}Copy the codeIii. Presentation
[Display address]
Master, come play sa ~
nanfangzhe.gitee.io/cat-meow
[Display effect]
The current nuggets only support GIF effect, meow can only imagine :(meow meow meow ~
You can also go to station B to watch the effect:www.bilibili.com/video/BV17S…
Iv Complete Code
【 current use of cat meow audio download 】
Nanfangzhe. Gitee. IO/cat – meow/an… Nanfangzhe. Gitee. IO/cat – meow/me… Nanfangzhe. Gitee. IO/cat – meow/cu…
“The small icon”
Nanfangzhe. Gitee. IO/cat – meow/ca…
[cat.html]
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Meet a cat different position different meow. - Southerner</title>
<link rel="shortcut icon" href="./cat.ico">
<style>
.cat {
width: 500px;
margin: 0 auto;
position: relative;
cursor: pointer;
}
.head_content {
position: absolute;
top: 100px;
}
.ear_left {
width: 100px;
height: 150px;
background-color: #FCEDBC;
border-radius: 50% / 10%;
position: absolute;
top: 22px;
left: 16px;
transform: rotate(-20deg);
}
.ear_right {
width: 100px;
height: 150px;
background-color: #FCEDBC;
border-radius: 50% / 10%;
position: absolute;
top: 22px;
left: 227px;
transform: rotate(20deg);
}
.head {
width: 345px;
height: 270px;
background-color: #FFF5D7;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
top: 0;
}
.brow_left {
width: 44px;
height: 20px;
border: 1px solid transparent;
border-top: 2px solid # 000;
border-radius: 50%/35%;
position: absolute;
top: 49px;
left: 60px;
transform: rotate(-37deg);
}
.brow_right {
width: 44px;
height: 20px;
border: 1px solid transparent;
border-top: 2px solid # 000;
border-radius: 50%/35%;
position: absolute;
top: 49px;
left: 240px;
transform: rotate(37deg);
}
.eye_left {
width: 70px;
height: 70px;
background: #fff;
border: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: 67px;
left: 70px;
}
.eye_right {
width: 70px;
height: 70px;
background: #fff;
border: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: 67px;
left: 205px;
}
.pupil {
width: 38px;
height: 38px;
background: # 000;
border-radius: 50%;
position: absolute;
top: 7px;
left: 30px;
}
.beard_left1 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 158px;
left: -50px;
transform: rotate(10deg);
}
.beard_left2 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 187px;
left: -60px;
transform: rotate(-7deg);
}
.beard_left3 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 208px;
left: -50px;
transform: rotate(-16deg);
}
.beard_right1 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 158px;
left: 300px;
transform: rotate(-10deg);
}
.beard_right2 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 187px;
left: 310px;
transform: rotate(7deg);
}
.beard_right3 {
width: 95px;
border-top: 1px solid # 000;
position: absolute;
top: 208px;
left: 300px;
transform: rotate(16deg);
}
.nose {
width: 20px;
height: 10px;
background-color: # 000;
border-radius: 50%/40%;
position: absolute;
top: 142px;
left: 161px;
}
.mouse {
position: absolute;
top: 152px;
left: 171px;
}
.mouse_top {
height: 10px;
border-left: 1px solid # 000;
position: absolute;
top: 0;
left: 0;
}
.mouse_left {
width: 100px;
height: 100px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: -78px;
left: -86px;
}
.mouse_right {
width: 100px;
height: 100px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: -78px;
left: -14px;
}
.mouse_bottom {
width: 20px;
height: 20px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-right: 1px solid # 000;
position: absolute;
top: 8px;
left: -9px;
transform: rotate(45deg);
}
.mouse_bottom_show {
width: 100px;
height: 100px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: -63px;
left: -49px;
display: none;
}
.miao {
position: absolute;
top: -5px;
left: 52px;
font-size: 20px;
opacity: 0;
color: #FD7055;
}
@keyframes miaoAnim {
0% {
opacity: 0;
top: -5px;
left: 52px;
}
30% {
opacity: 1;
top: -20px;
left: 72px;
font-size: 23px;
}
65% {
opacity: 0.5;
top: -35px;
left: 92px;
font-size: 26px;
}
100% {
opacity: 0;
top: -50px;
left: 112px;
font-size: 30px; }}.mouse:hover .mouse_bottom {
display: none;
}
.mouse:hover .mouse_bottom_show {
display: block;
}
.mouse:hover .miao {
animation: miaoAnim 1.5 s linear;
}
.body_content {
position: absolute;
top: 305px;
left: 101px;
}
.body {
width: 140px;
height: 165px;
background: #FCEDBC;
border: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -10;
}
.arm_left {
width: 20px;
height: 80px;
background: #FAE8AD;
border: 1px solid # 000;
border-radius: 50% / 40%;
position: absolute;
top: 30px;
left: 10px;
transform: rotate(50deg);
z-index: -20;
}
.arm_right {
width: 20px;
height: 80px;
background: #FAE8AD;
border: 1px solid # 000;
border-radius: 50% / 40%;
position: absolute;
top: 30px;
left: 110px;
transform: rotate(-50deg);
z-index: -20;
}
.leg_left {
width: 30px;
height: 93px;
background: #FAE8AD;
border: 1px solid # 000;
border-radius: 50% / 40%;
position: absolute;
top: 88px;
left: 14px;
transform: rotate(-20deg);
z-index: -20;
}
.leg_right {
width: 30px;
height: 93px;
background: #FAE8AD;
border: 1px solid # 000;
border-radius: 50% / 40%;
position: absolute;
top: 88px;
left: 96px;
transform: rotate(20deg);
z-index: -20;
}
.tail {
position: absolute;
top: 86px;
left: 52px;
z-index: -30;
animation: tailanim 1.5 s infinite;
}
.tail1 {
width: 236px;
height: 100px;
border: 1px solid transparent;
border-top: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-25deg);
}
.tail2 {
width: 61px;
height: 41px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-right: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: -13px;
left: 145px;
transform: rotate(-38deg);
}
.tail3 {
width: 23px;
height: 30px;
border: 1px solid transparent;
border-bottom: 1px solid # 000;
border-right: 1px solid # 000;
border-radius: 50%;
position: absolute;
top: 5px;
left: 148px;
transform: rotate(121deg);
}
@keyframes tailanim {
/* Tail animation */
20% {
transform: rotate(5deg);
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg); }}.ear_left:hover {
animation: earLeftAnim 0.5 s linear;
}
.ear_right:hover {
animation: earRightAnim 0.5 s linear;
}
@keyframes earLeftAnim {
50% {
top: 13px;
transform: rotate(-3deg);
}
100% {
top: 22px;
transform: rotate(-20deg); }}@keyframes earRightAnim {
50% {
top: 13px;
transform: rotate(3deg);
}
100% {
top: 22px;
transform: rotate(20deg); }}</style>
</head>
<body>
<div class="cat">
<div class="head_content">
<div class="ear_left">
<a href="#" onMouseOver="meow('ear')">
<div style="height: 50px; width: 100px;"></div>
</a>
</div>
<div class="ear_right">
<a href="#" onMouseOver="meow('ear')">
<div style="height: 50px; width: 100px;"></div>
</a>
</div>
</a>
<div class="head">
</div>
<div class="brow_left"></div>
<div class="brow_right"></div>
<div class="eye_left">
<div id="pL" class="pupil"></div>
</div>
<div class="eye_right">
<div id="pR" class="pupil"></div>
</div>
<div class="beard_left1"></div>
<div class="beard_left2"></div>
<div class="beard_left3"></div>
<div class="beard_right1"></div>
<div class="beard_right2"></div>
<div class="beard_right3"></div>
<div class="nose"></div>
<div class="mouse">
<div class="mouse_top"></div>
<div class="mouse_left"></div>
<div class="mouse_right"></div>
<a href="#" onMouseOver="meow('mouse')">
<div class="mouse_bottom"></div>
<div class="mouse_bottom_show"></div>
</a>
<div class="miao">Meow ~</div>
</div>
</div>
<div class="body_content">
<div class="body"></div>
<div class="arm_left"></div>
<div class="arm_right"></div>
<div class="leg_left"></div>
<div class="leg_right"></div>
<div class="tail">
<div class="tail1"></div>
<a href="#" onMouseOver="meow('tail')">
<div class="tail2"></div>
<div class="tail3"></div>
</a>
</div>
</div>
</div>
<!-- 猫叫音频 start -->
<audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
<audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
<audio id="cat-q" src="cute.mp3" preload="auto"></audio>
<! -- Cat meow -->
<script>
function meow(name) {
// Meow
switch (name) {
case 'mouse':
// When you touch a small mouth
var rainMusic = document.getElementById("cat-meek");
rainMusic.play();
break;
case 'tail':
// Step on the cat's tail!
var rainMusic = document.getElementById("cat-angry");
rainMusic.play();
break;
case 'ear':
// Touch the cat
var rainMusic = document.getElementById("cat-q");
rainMusic.play();
break; }}</script>
<script>
// Get the location of the cat div
var catx = document.getElementsByClassName("cat") [0].offsetLeft;
var pL = document.getElementById("pL");
var pR = document.getElementById("pR");
var r = 17;
document.onmousemove = function (ev) {
var e = ev || event;
var m = [];
m.x = e.clientX - catx; // Mouse coordinates can be placed on the left and so on
m.y = e.clientY - 170; //head_content, head, eye distance from the upper area, so that the mouse can fall on the upper area
var s = [];
s.x = pL.offsetLeft;
s.y = pL.offsetTop;
var mosx = Math.abs(m.x - s.x);
var mosy = Math.abs(m.y - s.y);
var angle = Math.atan(mosy / mosx);
var cx = 0,
cy = 0;
if (m.x >= s.x && m.y <= s.y) {
cx = Math.cos(angle) * r;
cy = Math.sin(angle) * -r;
// console.log(" bottom right ");
}
if (m.x < s.x && m.y < s.y) {
cx = Math.cos(angle) * -r;
cy = Math.sin(angle) * -r;
// console.log("左下");
}
if (m.x < s.x && m.y > s.y) {
cx = Math.cos(angle) * -r;
cy = Math.sin(angle) * r;
// console.log(" upper left ");
}
if (m.x > s.x && m.y > s.y) {
cx = Math.cos(angle) * r;
cy = Math.sin(angle) * r;
// console.log("右上");
}
if ((m.x + catx) >= catx && (m.x + catx) <= (catx + 345) && (m.y + 170) > =100 && (m.y + 170) < =360) {
pL.style.top = 15 + 'px';
pR.style.top = 15 + 'px';
pL.style.left = 18 + 'px';
pR.style.left = 18 + 'px';
} else {
pL.style.top = 15 + cy + 'px';
pR.style.top = 15 + cy + 'px';
pL.style.left = 17 + cx + 'px';
pR.style.left = 17 + cx + 'px'; }}</script>
<! -- <div style="text-align:center; margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';" > <p> For browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, Window of the World. Internet Explorer 8 or later is not supported. Source: < / p > < p > < a href = "http://sc.chinaz.com/" target = "_blank" > master material < / a > < / p > < / div > -- >
</body>
</html>
Copy the codeFive complete project source code address
Project source code address
Gitee.com/nanfangzhe/…
Six thank
Provide cat source material: webmaster material