当前位置：首页 > 网页特效 > 鼠标特效 >

跟随鼠标转动的眼睛

时间：2013-05-09 11:01 来源：互联网作者：源码搜藏收藏推荐

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,codesocang,codesocang.com,sky,www.codesocang.com,源码搜藏网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在源码搜藏网" />
<title>跟随鼠标转动的眼睛，codesocang.com收集。</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>
<a href="<#ZC_BLOG_HOST#>">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com，站长js特效。<hr>

<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);
    } //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    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;
    } //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

跟随眼睛转动的眼睛，很有趣的一个网页特效。

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,codesocang,codesocang.com,sky,www.codesocang.com,源码搜藏网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在源码搜藏网" />
<title>跟随鼠标转动的眼睛，codesocang.com收集。</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>
<a href="<#ZC_BLOG_HOST#>">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com，站长js特效。<hr>

<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);
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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;
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

网页特效

跟随鼠标转动的眼睛

鼠标特效下载排行

最新文章