【前端】【HTML】震惊 | 我的网站突然传出阵阵猫叫声，喵~

南方者
359 阅读1分钟

一起用代码吸猫！本文正在参与【喵星人征文活动】

一 前言

大家好，这里是程序员南方者。

今天，我给大家来介绍如何给猫咪的动作基础上添加喵叫的音频.

这里直接就拿站长之家的猫咪动画模板的源码来进行添加完善喵叫功能了。

如果你已有现成的代码或者素材模板，也可以进行参考，为你的小猫叫起来~

喵~ 喵~ 喵~

二 “硬”核代码

【html代码】

    <!-- 找到需要添加到鼠标移动到的地方就播放音频的地方 -->
    <a href="#" onMouseOver="meow('ear')">
        <div>需要鼠标移动到的地方就播放音频</div>
    </a>
    <!-- 音频 -->
    <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>

【js代码】

    function meow(name) {
            // 发出猫叫声
            switch (name) {
                case 'mouse':
                // 碰到小嘴巴的时
                    var rainMusic = document.getElementById("cat-meek");
                    rainMusic.play();
                    break;
		case 'tail':
                    // 踩到猫尾巴了！
                    var rainMusic = document.getElementById("cat-angry");
                    rainMusic.play();
                    break;
                case 'ear':
                    // 摸摸猫尔多~
                    var rainMusic = document.getElementById("cat-q");
                    rainMusic.play();
                    break;
              }
    }

三 展示情况

【展示地址】

主子，来玩撒~

nanfangzhe.gitee.io/cat-meow

【展示效果】

当前掘金仅支持gif效果，喵叫只能自行脑补:( 　　喵喵喵~
也可转到，b站观看效果：www.bilibili.com/video/BV17S… cat.gif

四 完整代码

【当前用到的猫叫音频下载】

nanfangzhe.gitee.io/cat-meow/an…
nanfangzhe.gitee.io/cat-meow/me…
nanfangzhe.gitee.io/cat-meow/cu…

【小icon】

nanfangzhe.gitee.io/cat-meow/ca…

【cat.html页面】

<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>碰到猫咪不同位置不同叫声 - 南方者</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.5s 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.5s 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 {

			/*尾巴动画*/
			20% {
				transform: rotate(5deg);
			}

			40% {
				transform: rotate(0deg);
			}

			60% {
				transform: rotate(10deg);
			}

			100% {
				transform: rotate(0deg);
			}
		}

		.ear_left:hover {
			animation: earLeftAnim 0.5s linear;
		}

		.ear_right:hover {
			animation: earRightAnim 0.5s 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">喵~</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>
	<!-- 猫叫音频 end -->
	<script>
		function meow(name) {
			// 发出猫叫声
			switch (name) {
				case 'mouse':
					// 碰到小嘴巴的时
					var rainMusic = document.getElementById("cat-meek");
					rainMusic.play();
					break;
				case 'tail':
					// 踩到猫尾巴了！
					var rainMusic = document.getElementById("cat-angry");
					rainMusic.play();
					break;
				case 'ear':
					// 摸摸猫尔多~
					var rainMusic = document.getElementById("cat-q");
					rainMusic.play();
					break;
			}
		}
	</script>

	<script>
		//获取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; //鼠标坐标能落在左边等位置
			m.y = e.clientY - 170; //head_content、head、eye离上方的距离，使鼠标能落在上方区域
			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("右下");
			}
			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("左上");
			}
			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>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
		<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
	</div> -->
</body>

</html>

五 完整项目源码地址

【项目源码地址】

gitee.com/nanfangzhe/…

六 感谢

提供猫咪源码素材：站长素材

avatar
文章
阅读
粉丝