javascript简写效果“神秘的眼睛”

更新时间：2008年02月27日 22:39:48 作者：

“眼睛跟随鼠标转动效果”—— 265.com 把它放在网页的LOGO里，用javascript来实现，这个创意不错！以前刚做FLASH的时候，用AS1实现过，今天下班早，在家简写了个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.jb51.net神秘的眼睛脚本之家</title> <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; } @media all and (min-width:0px){ .eye{line-height:normal;} } .pupil{     overflow:hidden;     position:absolute;     margin:-5px 0 0 -5px;     width:10px;     height:10px;     line-height:normal;     font-size:10px;     top:50%;     left:50%; } </style> </head> <body> <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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

动态载入js提高网页打开速度的方法
这篇文章主要介绍了动态载入js提高网页打开速度的方法,需要的朋友可以参考下
2014-07-07
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.这篇文章主要介绍了Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)的相关资料,需要的朋友可以参考下
2016-10-10
PixiJS学习之Sprite类的使用详解
Sprite 直译为 “精灵”，是游戏开发中常见的术语，就是将一个角色的多个动作放到一个图片里，通过裁剪局部区域得到当前的角色状态图。本文主要介绍了PixiJS中Sprite类的使用，需要的可以参考一下
2023-02-02
JavaScript计算器网页版实现代码分享
这篇文章主要为大家详细介绍了JavaScript计算器网页版实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
微信小程序下拉框功能的实例代码
这篇文章主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
js动态添加带圆圈序号列表的实例代码
这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
firefox TBODY 用js显示和隐藏时出现错位的解决方法
今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。
2008-12-12
微信小程序如何获取群聊的openGid以及名称详解
这篇文章主要介绍了小程序如何获取群聊的openGid以及名称详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
Javascript对象Clone实例分析
这篇文章主要介绍了Javascript对象Clone用法,实例分析了javascript对象克隆的相关技巧,需要的朋友可以参考下
2015-06-06
JavaScript iframe数据共享接口实现方法
在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情，如果我们能够写一个一劳永逸的接口那就再方便不过了，下面就来简答介绍一下如何实现此功能，对js iframe相关知识感兴趣的朋友一起学习吧
2016-01-01