软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：javascript,神秘的眼睛

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

技术文章快速查找

javascript 网站常用的iframe分割

jQuery 方法大全方便学习参考

有关DOM元素与事件的3个谜题

Javascript基础函数“重载” 详细介绍

Javascript对象中关于setTimeout和setInterval的this介绍

JS中动态添加事件(绑定事件)的代码

JavaScript中的其他对象

浅析Javascript使用include/require

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建