您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 鼠标特效 >

    跟随鼠标转动的眼睛

    时间:2013-05-09 11:01 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在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>
    <!--欢迎来到源码搜藏网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.codesocang.com,codesocang@msn.com,用.net打造靓站-->
    <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>

    跟随鼠标转动的眼睛由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shubiaotexiao/4648.html
    标签:网站源码