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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript实现抽奖程序的简单实例
下面小编就为大家带来一篇javascript实现抽奖程序的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
利用原生JS实现data方法示例代码
这篇文章主要给大家介绍了关于如何利用原生JS实现data方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用原生JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
微信小程序swiper实现文字纵向轮播提示效果
这篇文章主要介绍了微信小程序swiper实现文字纵向轮播提示效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
JS调用Android、Ios原生控件
本文主要介绍了JS调用Android、Ios通信的相同点和不同点，以便帮助我们在进行混合式开发时，提高代码质量，实现两者在网页端代码的统一。下面跟着小编一起来看下吧
2017-01-01
JavaScript中sharedWorker 实现多页面通信的实例详解
这篇文章主要介绍了JavaScript中sharedWorker 实现多页面通信,通过给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
9102了，你还不会移动端真机调试吗
这篇文章主要介绍了9102了，你还不会移动端真机调试吗，本文详细的介绍了3种移动端真机调试方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
使用apply方法处理数组的三个技巧[译]
本文要讲的是使用apply方法处理数组的三个技巧，需要的朋友可以参考下
2012-09-09
原生js实现省市区三级联动代码分享
这篇文章主要介绍了原生js实现省市区三级联动功能以及代码分享，对此有需要的朋友可以参考学习下。
2018-02-02
TypeScript中的交叉类型和联合类型示例讲解
交叉类型简单来说就是通过&符号将多个类型进行合并成一个类型，然后用type来声明新生成的类型，联合类型和交叉类型比较相似，联合类型通过|符号连接多个类型从而生成新的类型，本文就这两个类型结合示例代码详细讲解，感兴趣的朋友跟随小编一起学习吧
2022-12-12
JavaScript Promise执行流程深刻理解
这篇文章主要介绍了JavaScript Promise执行流程深刻理解，他是一个构造函数，每个创建的promise都有各自状态和值，且状态初始值为pending，值为undefined
2022-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具