卡通小人的眼睛跟着鼠标动

最新推荐文章于 2022-03-27 18:42:03 发布

zzuieliyaoli李力

最新推荐文章于 2022-03-27 18:42:03 发布

阅读量1.3w

点赞数 6

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zzuieliyaoli/article/details/41788751

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

来源，我做了一些改变。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>眼镜随着鼠标动-模仿</title>
	<link rel="stylesheet" type="text/css" href="2.css">
	<script type="text/javascript" src="2.js"></script>
</head>
<body>
	<div id="wrapper">
			<div class="face" id="blue">
				<div class="eyes">
					<div class="eye-left">
						<div class="eye-in"></div>
					</div>
					<div class="eye-right">
						<div class="eye-in"></div>
					</div>
				</div>
				<div class="nose">
					<a></a>
					<a></a>
				</div>
				<div class="mouth">
					<div class="tooth" id="tooth1"></div>
					<div class="tooth" id="tooth2"></div>
					<div class="tooth" id="tooth3"></div>
					<div class="tooth" id="tooth4"></div>

				</div>
			</div>
	</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

div#wrapper{
	width:100%;
	height: 1500px;   /*height:100%;*/

	background-color: #eee;

	text-align: center;
}
div.face{
	position: relative;
	top: 20%;


	margin-left: 0px;
	margin-right: 0px;

	width: 200px;
	height: 250px;
	display: inline-block;
	overflow: hidden;


	background-color: #2db5ae;

	border-radius: 45% 45% 0 0 ;
}


div.eyes{
	position: relative;
	top: 70px;
	width: 100%;
	height: 80px;

	background-color: #2db5ae;
}

div.eye-left{

	position: absolute;
	left: 10%;
	
	overflow: hidden;
	width: 35%;
	height: 100%;

	background-color: white;
	border-radius: 45% 45% 55% 55%;
}
div.eye-right{

	position: absolute;
	right: 10%;

	overflow: hidden;
	width: 35%;
	height: 100%;

	
	background-color: white;
	border-radius: 45% 45% 55% 55%;
}

div.eye-in{
	position: relative;

	display: inline-block;
	
	width: 45%;   
	height: 55%;
	
	margin-right: 0;
	margin-left: 0;
	margin-top: 20px;

	background-color: black;

	border-radius: 50% 50%;    /*border-radius的弧度大小与宽度高度有关*/
								/*四个值依次控制的是哪个角。*/
}

div.nose{
	position: relative;
	top: 32%;
	text-align: center;

}

div.nose a{

	display: inline-block;
	background-color: white;
	height: 10px;
	width: 10px;

	border-radius: 5px;
}

div.mouth{ /*为什么会卡一半！？？？？？？*/
	position: relative;
	top:90px;
	width: 100%;
	height: 25%;
	
	display: inline-block;
	overflow: hidden;
	/*margin-left: 0px;
	margin-right: 0px;*/
	
	text-align: center;
	background-color: #614030;

	border-radius: 81% 5% 81% 5%;
}

div.tooth{
	position: relative;
	/*top: -5px;*/
	
	height: 50px;
	width: 35px;
	
	display: inline-block;
	margin-left: -7px;

	background-color: white;
	
	border-radius: 0 0 50% 50%;

}

div#tooth1{
	/*height: 50px;*/
}
div#tooth2{
	/*height: 45px;*/
	top: -5px;
}
div#tooth3{
	/*height: 40px;*/
	top: -10px;
}
div#tooth4{
	/*height: 35px;*/
	top: -15px;
}

window.onload = function(){
	
	// first Step  

	// 动态语言直接 var eyes = document.querySelectorAll(".eye-in");
	var eyes = [];
	eyes = document.querySelectorAll(".eye-in");

	// second Step	为元素添加事件处理
	document.onmousemove = function(event){
		var mouseLeft = event.clientX,
			mouseTop = event.clientY;
		// console.log(getViewportSize().height);

		throttle(function(){   
				$forEach(eyes, function(o, i){
						var chaX = mouseLeft - getOffset(eyes[i]).left;
						var chaY = mouseTop  - getOffset(eyes[i]).top;
						var viewportWidth = getViewportSize().width /2;
						var viewportHeight = getViewportSize().height /2;
						//mouseLeft 与 mouseTop的值有时候太小，导致差值太小
						eyes[i].style.left = ((chaX / viewportWidth)*50) + "%";  
						eyes[i].style.top  = ((chaY / viewportHeight)*50) + "%";
				});
			}
		);
		// clearTimeout(tId);

		// var tId = function(){
		// 	setTimeout(function(){
		// 		$forEach(eyes, function(o, i){
		// 			var chaX = mouseLeft - getOffset(eyes[i]).left;
		// 			var chaY = mouseTop  - getOffset(eyes[i]).top;
		// 			var viewportWidth = getViewportSize().width /2;
		// 			var viewportHeight = getViewportSize().height /2;
		// 			//mouseLeft 与 mouseTop的值有时候太小，导致差值太小
		// 			eyes[i].style.left = ((chaX / viewportWidth)*50) + "%";  
		// 			eyes[i].style.top  = ((chaY / viewportHeight)*50) + "%";
		// 		});
		// 	},70);
		// }();
			
	};





	// 要用到的函数
	function throttle(method, context){
		clearTimeout(method.tId);
		method.tId = setTimeout(function(){
			method.call(context);
		}, 70);
	}

	
	function $forEach(arr, callback, thisp){
		if (arr.forEach) {
			arr.forEach(callback, thisp);
		} else {
			for (var i = 0, len=arr.length; i<len; i++){
				callback.call(thisp, arr[i], i, arr);
			}
		}
	}


	// 单位？？？？
	function getOffset(element){
		var actualLeft = element.offsetLeft;
		var actualTop  = element.offsetTop;
		// var actualTop = element.offsetWidth / 2;
		// var actualLeft = element.offsetHeight /2;
		var current = element.offsetParent;

		while(current !== null){
			actualTop += current.offsetTop;
			actualLeft += current.offsetLeft;
			current = current.offsetParent;
		}

		return {left: actualLeft,top:actualTop};
	}

	function getViewportSize(){
		var pageWidth = window.innerWidth,
			pageHeight = window.innerHeight;
		
		if (typeof pageWidth != "number") {
				pageWidth = document.documentElement.clientWidth;
				pageHeight = document.documentElement.clientHeight;
		}else {
			pageWidth = document.body.clientWidth;
			pageHeight = document.body.clientHeight;
		}

		// console.log(pageWidth);
		return {width:pageWidth,height:pageHeight}	
	}
	


};