<style type="text/css">
.eye{
display:inline;
overflow:hidden;
position:relative;
float:left;
margin:50px 0 0 50px;
width:50px;
height:50px;
font-size:50px;
line-height:106%;
+line-height:normal;
cursor:default;
}
.pupil{
overflow:hidden;
position:absolute;
margin:-5px 0 0 -5px;
line-height:normal;
font-size:10px;
top:50%;
left:50%;
}
</style>
<div id="leftEye" class="eye">○<span id="leftPupil" class="pupil">●</span></div>
<div id="rightEye" class="eye">○<span id="rightPupil" class="pupil">●</span></div>
<input name="" id="xy" type="text" />
<script type="text/javascript">
var $=function(o){return document.getElementById(o)}
var leftEye=$("leftEye");
var rightEye=$("rightEye");
var leftPupil=$("leftPupil");
var rightPupil=$("rightPupil");
var xy=$("xy");
document.documentElement.onmousemove=function(e){
var e=window.event||e;
var eX=e.clientX, eY=e.clientY;
track(leftEye,leftPupil,eX,eY);
track(rightEye,rightPupil,eX,eY);
}
function track(o,i,eX,eY){
var oL=o.offsetLeft;
var oT=o.offsetTop;
var oW=o.offsetWidth;
var oH=o.offsetHeight;
var oCW=o.clientWidth;
var oCH=o.clientHeight;
var oX=oL+oW/2;
var oY=oT+oH/2;
var eX=eX-oX;
var eY=eY-oY;
var eXY,iL,iT;
if(eX!=0&&eY!=0){
eXY=eX/eY;
var r=oCW/2-12;
var R=Math.sqrt(eX*eX+eY*eY);
var rR=R/5>r?r:R/5;
var iL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));
if(eX<0)iL=-iL;
var iT=iL/eXY;
i.style.left=(iL+oCW/2)+"px";
i.style.top=(iT+oCH/2)+"px";
}
xy.value=eX+","+eY;
}
</script>
- 大小: 2.5 KB
分享到:
相关推荐
将用Arduino构建一个电子动画的眼睛
眼睛会动的鳄鱼404错误页面代码
眼睛会动的鳄鱼404错误页面代码.zip
Flash眼睛转动动画源文件,很多眼睛围绕鼠标转动,快速移动鼠标会有更酷的效果,基于Flash8源文件,国外网站下载的Flash眼睛特效,真心挺有创意的效果,里面有丰富的AS脚本,可学习一下。
眼睛卫士同时还是一款非常好用的定时关机软件,不但提供了常见的定时关机功能,而且提供了新颖的闲置关机功能:在您有事离开电脑而又忘记关闭电脑时,眼睛卫士会体贴的按您设定的时限自动为您关机。 眼睛卫士是一...
眼睛转动的Flash动画范例,眼睛流畅的转动,Flash8源码素材,眼睛转动是由鼠标来驱动的,在眼睛上方或周围晃动鼠标,头像的眼睛就会朝着鼠标的方向转动,好像会一直盯着鼠标看一样,有点人性化,包括Flash源文件。
非常实用的特效代码,可以完美运行,可以二次修改!
眼睛会动的鳄鱼404错误页面代码,鼠标移动时鳄鱼的眼睛会跟着移动,兼容主流浏览器
之前我们分享过很多基于纯CSS3的绘制动画效果,比如这款纯CSS3实现大象走路动画和纯CSS3绘制可爱的蚱蜢,效果都非常不错...今天要分享的这款也是基于纯CSS3可爱的猫头鹰动画,移动鼠标猫头鹰的眼睛还会转动,非常逼真。
crazytalk破解版是一个非常疯狂的照片制作软件,它能够为将一张静态照片变声为一个会说话的照片,非常有趣,并且还能够为玩家制作出非常细致、生动、拟真的脸部动画,不仅除了嘴巴会动,脸部肌肉、眼睛,等大部分...
眼睛会动的小黄人CSS3特效是一款基于css3 keyframes属性绘制的卡通小黄人图形动画特效。
可以是你的图片动起来哦可以是你的图片动起来哦
会眨眼睛并且会随鼠标位置转动的樱桃小丸子登场啦,里面大多都有解释,棒棒!
在用机器视觉系统监测驾驶员的眼睛疲劳状态时,由于图像采集与图像处理消耗一定的时间,降低了系统的采样率,正常情况下,眼睛的眨动过程非常短暂,过低的采样率会漏掉眼睛某些关键状态的信息。因此直接对视频进行...
眼-眼! 您的眼睛感到疲倦吗?... 如果您“盯着”同一地点时间过长,则该应用会提醒您睁大眼睛。 你们不要像我一样迷失自己的眼睛! 创建了“ Freetail Hackers的2018年SpringHackathon(Wholesome Hacks)的第一名
源码介绍 使用的是国外的技术,纯前端页面实现无后台,上传好照片脸贴近虚线,下一步选择好嘴唇和眼睛的位置,照片就可以动起来了,另外鼠标可以左右拖动带着左右摇摆。
HTML5 CSS3 生成逼真的氏量小蜜蜂翅膀呼扇动画效果,这个不是Flash哦,但实现的动画...这就是一个用HTML CSS3绘制生成的小蜜蜂动画,动画效果十分流畅,翅膀扇来扇去,小蜜蜂还会眨眼睛、瞪眼睛,十分可爱,十分真实。
html5 SVG技术绘画小鸟动画,小鸟的翅膀会不停的扇动,眼睛在不断的转动,看上去像是猜不透的心事,又很人性,有逗的小鸟动画效果,参考一下,学习SVG的好素材。