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

来源，我做了一些改变。

<!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}   }};

卡通小人的眼睛跟着鼠标动相关推荐

HTML+CSS3+JS实现表情的眼睛跟着鼠标动
小黄人表情 (function (doc, win) {var docEl = doc.documentElement, //文档根标签resizeEvent ="orientationch ...
java 鼠标动眼睛动_java实现眼睛跟着鼠标转动的跟踪眼代码
import java.html" target="_blank">java.applet.Applet; import java.awt.Color; impor ...
java鼠标经过代码_一段眼睛跟着鼠标转动的跟踪眼代码
import java.applet.Applet; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; i ...
瞧一瞧看一看啦“一段眼睛跟着鼠标转动的跟踪眼代码”
import java.applet.Applet; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; i ...
mastercam9.1标注尺寸点不到屏幕上跟着鼠标动确定不了
mastercam9.1标注尺寸点不到屏幕上跟着鼠标动确定不了解决方法: 输入法和软件有冲突,改变一下输入法
【不可思议的CANVAS】画一只会跟着鼠标走的小狗
点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! 以前经常看到这种效果:在网页右下角放一个人,然后他的眼珠会跟着鼠标转,效果如下: 这个例子 ...
用Canvas画一只会跟着鼠标走的小狗
以前经常看到这种效果:在网页右下角放一个人,然后他的眼珠会跟着鼠标转,效果如下: 这个例子来自于CodePen,它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果. 这种跟 ...
一步一步学做游戏第二回：让蘑菇随鼠标动起来
上回分析了游戏,在这一回我们将让蘑菇跟随鼠标动起来~ 达到这个效果: http://www.html5china.com/html5games/mogu/index1.html 一.写html代码 X ...
眼睛跟随鼠标转动的小黄人 html+css+js
先上效果(完整代码在最后): 实现过程(可跟着一步一步书写): 1. 先设置基本的css样式,让body高度为100vh后,用flex布局让其子元素居中对齐,(这几行代码直接复制过去就行): *{pa ...

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

卡通小人的眼睛跟着鼠标动相关推荐

最新文章

热门文章