zoukankan      html  css  js  c++  java
  • JavaScript仿265网站LOGO会盯着你看的眼睛代码

    代码简介:

    仿265网站LOGO,会盯着你看的眼睛,会跟着你的鼠标转,有意思吧?这可是用JavaScript实现的哦,学习JS控制图像很不错的实例。

    代码内容:

    View Code
    <html>
    <head>
    <title>JavaScript仿265网站LOGO会盯着你看的眼睛代码 - www.webdm.cn</title>
    </head>
    <body>
    <script type="text/javascript" >
    if  ((document.getElementById) && 
    window.addEventListener 
    || window.attachEvent){
    (
    function(){
    var e_img = new Image();
    e_img.src 
    = "http://www.webdm.cn/images/20091005/eye.gif"
    var p_img = new Image();
    p_img.src 
    = "http://www.webdm.cn/images/20091005/pupils.gif";
    var d = document;
    var pix = "px";
    var idx = document.images.length;
    if (document.getElementById("cont"+idx)) idx++;
    var eyeballs = "";
    var pupil1 = "";
    var pupil2 = "";
    d.write(
    '<div id="cont'+idx+'" class="eyestyle" style="height:34px;69px">'
    +'<div id="eyblls'+idx+'" style="position:relative;69px;height:34px"><img src="'+e_img.src+'" alt=""/>'
    +'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;13px;height:13px"/>'
    +'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;13px;height:13px"/>'
    +'<\/div><\/div>');
    function watchTheMouse(y,x){
    var osy = eyeballs.offsetTop;
    var osx = eyeballs.offsetLeft;
    var c1y = osy + 17;
    var c1x = osx + 17;
    var c2y = osy + 17;
    var c2x = osx + 52;
    var dy1 = y - c1y;
    var dx1 = x - c1x;
    var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
    var dy2 = y - c2y;
    var dx2 = x - c2x;
    var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
    var ay1 = y - c1y;
    var ax1 = x - c1x;
    var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
    var ay2 = y - c2y;
    var ax2 = x - c2x;
    var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
    var dv = 1.7;
    var onEyeBall1 = (d1 < 17)?d1/dv:10;
    var onEyeBall2 = (d2 < 17)?d2/dv:10;
    pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
    pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
    pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
    pupil2.left = c2x-6+onEyeBall2  *Math.cos(angle2*Math.PI/180)-osx+pix;
    }
    function mouse(e){
    var y,x;
    if (!e) e = window.event;    
     
    if (typeof e.pageY == 'number'){
      y 
    = e.pageY;
      x 
    = e.pageX;
     }
     
    else{
     
    var ref = document.documentElement||document.body;
     y 
    = e.clientY + ref.scrollTop;
     x 
    = e.clientX + ref.scrollLeft;
    }
    watchTheMouse(y,x);
    }
    function init(){
    eyeballs 
    = d.getElementById("eyblls"+idx);
    pupil1 
    = d.getElementById("ppl1"+idx).style;
    pupil2 
    = d.getElementById("ppl2"+idx).style;
    }
    if (window.addEventListener){
     window.addEventListener(
    "load",init,false);
     document.addEventListener(
    "mousemove",mouse,false);
    }  
    else if (window.attachEvent){
     window.attachEvent(
    "onload",init);
     document.attachEvent(
    "onmousemove",mouse);

    })();
    }
    //End.
    </script>
    </body>
    </html>
    <br />
    <p><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:http://www.webdm.cn/webcode/e5be338f-4aa5-43df-a456-e1500aa736c4.html
  • 相关阅读:
    以太坊DApp开发(2):以太坊智能合约开发环境搭建以及第一个Dapp
    以太坊DApp开发(1):入门-开发环境搭建
    全文搜索引擎 Elasticsearch (四)MySQL如何实时同步数据到ES
    nginx 添加https 配置
    spring boot 2.0.3+spring cloud (Finchley)6、配置中心Spring Cloud Config
    linux中没有dos2UNIX或者UNIX2dos命令解决办法
    linux 安装redis4.0
    maven 不同环境打包命令
    PowerShell 中使用 mvn 编译报错 Unknown lifecycle phase ".test.skip=true". 解决办法
    通过更改scrapy源码进行spider分发实现一个综合爬虫
  • 原文地址:https://www.cnblogs.com/webdm/p/2159321.html
Copyright © 2011-2022 走看看