这个特效非常简单，其中眼球和眼珠都是特定的图片。只要掌握好距离坐标就没问题。我就直接贴代码，有兴趣的朋友可以自己复制下来运行一下，下面的眼睛图像就是我的文件用到的图像，比较难看.。我就把我的代码贴出来好了。

其中的html文件如下：

<!DOCTYPE html>

<html>

<head>

    <title>eye</title>

    <script src="eye.js" type="text/javascript"></script>

<style>

    div.img { background:url("../bgcolor.jpg") no-repeat; left:67px; top:7px; position:relative;}

    :root body div.img {background:url("../bgcolor.jpg") no-repeat; left:67px; top:0px; position:relative;}

    div.img p { width:250px; height:150px;}

    #leftBall,#leftEye,#rightBall,#rightBall1,#rightBall2,#rightBall3,#rightBall4,#rightBall6,#rightBall5,#rightEye {float: left;position: absolute;}

    #leftEye{left:130px;top:200px;}

    #leftBall{left:150px;top:230px;}

    #rightBall1{left:370px;top:230px;}

    #rightBall2{left:370px;top:230px;}

    #rightBall3{left:370px;top:230px;}

    #rightBall4{left:370px;top:230px;}

    #rightBall5{left:370px;top:230px;}

    #rightBall6{left:370px;top:230px;}

    #rightBall{left:350px;top:230px;}

    #rightEye{left: 330px;top:200px;}

    a {text-decoration:none; font-size:50px; margin-left: 20px;}

    a:visited{color:green;}

    a:link {color:blue;}

    a:hover {color:red;}

    a:active {color:white;}

</style>

</head>

<body>

<img src="ball.JPG" width="14" height="14" id="rightBall1"  /><img src="ball.JPG" width="14" height="14" id="rightBall2" /><img src="ball.JPG" width="14" height="14" id="rightBall3" />

<img src="ball.JPG" width="14" height="14" id="rightBall4" /><img src="ball.JP

G" width="14" height="14" id="rightBall5" /><img src="ball.JPG" width="14" height="14" id="rightBall6" />

<div id="rewrite"><h1 id="biaoTi"></h1><br />24 display:<input type="radio" name="radico"/>YES   <input type="radio" name="radico" checked="checked"/>NO</div>

<marquee direction="">wohui yi dong</marquee>

<div class="img"><p></p></div></body>

<div>

    <img src="../e.png"  id="leftEye" />

    <img src="../e.png" id="rightEye" />

    <img src="ball.JPG" width="14" height="14" id="leftBall" />

    <img src="ball.JPG" width="14" height="14" id="rightBall" />

    <a href="http://www.baidu.com/" >baidu.com</a>

</div>

</html>

其中的JS文件如下：eye.js

/**

 * Created with JetBrains WebStorm.

 * User: Administrator

 * Date: 13-9-5

 * Time: 下午4:25

 * To change this template use File | Settings | File Templates.

 */

window.onload=dateday;

document.onmousemove=moveHandle;

var tempx=new Array;

var tempy=new Array;

var i=0;

function moveHandle(evt){

      if(!evt)

        evt=window.event;

    makeMouseMove(evt.clientX,evt.clientY);

}

function makeMouseMove(xPos,yPos){

   tempx[i]=xPos;

   tempy[i]=yPos;

   i++;

   if(i==20){

       var k=0;

       for(var j=1;j<=6;j++){

           mouseMove(j,tempx[k],tempy[k]);

           k+=3

       }

       i=0;

   }

   eyeMove(xPos,yPos);

}

function eyeMove(xPos,yPos){

    var leftBall=document.getElementById("leftBall").style;

    var rightBall=document.getElementById("rightBall").style;

    leftBall.left=eyeFoll(xPos,130);

    leftBall.top=eyeFoll(yPos,200);

    rightBall.left=eyeFoll(xPos,330);

    rightBall.top=eyeFoll(yPos,200);

    function eyeFoll(currPos,eyePos){

        return Math.min(Math.max(currPos,eyePos+3),eyePos+60)+"px";

    }

}

function mouseMove(i,xPos,yPos){

    var rightBall=document.getElementById("rightBall"+i).style;

    rightBall.left=mouseFoll(xPos,330);

    rightBall.top=mouseFoll(yPos,200);

    function mouseFoll(currPos,eyePos){

        return currPos+"px";

    }

}

function dateday(){

    var date=new Date();var hour;var min=date.getMinutes();var second=date.getSeconds();var houzui="";

    if(second<10)second = "0"+second;

    if(show24()||date.getHours()<13){

         hour= date.getHours();

    }

    if(show24()==false){

        if(date.getHours()>12){

            hour= date.getHours()-12;houzui=" PM";

        }

        else{

            hour= date.getHours();houzui=" AM";

        }

    }

    var temp=Math.floor((date.getTime())/(1000*60*60));min=Math.floor((date.getTime()-temp*60*1000*60)/(1000*60));second=Math.floor((date.getTime()-temp*60*60*1000-min*1000*60)/1000);

    document.getElementById("biaoTi").innerHTML="BeiJing Time: "+hour+":"+min+":"+second+houzui;

    setTimeout(dateday,1000)

}

function show24(){

    return document.getElementsByName("radico")[0].checked;

}

其中用到了三张图片，分别是：

背景图片：

眼眶：（PNG格式）

眼珠：

将上面三幅图下载下来，对照好html文件中的图片路径设置好，就可以运行了。js文件路径也要设置好，一般将他们放在同一个文件夹下，在href中就可以直接输入图片名称就可以了！

javascript特效：会随着鼠标而动的眼睛的更多相关文章

  1. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  2. JavaScript特效源码(4、鼠标特效)

    1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...

  3. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  4. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  5. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  6. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  7. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  8. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  9. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

随机推荐

  1. jquery选择器:nth-child()与空格:eq() 的区别;

    在一个7x7的表格当中 nth-child(1); td.parents("table").find("tr :nth-child(1)").css(" ...

  2. .net DataTable 取值辅助类

    DataTableCommon类主要是帮助取值 方法列表: public static string GetCellString(DataTable dt,int row, int column) p ...

  3. javascript实现的功能--二级联动

    <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" ...

  4. 6．PHP 教程_PHP数据类型

    PHP数据类型 String(字符串),Integer(整型),Float(浮点型),Boolean(布尔型),Array(数组),Object(对象), NULL(空值). PHP字符串 一个字符串 ...

  5. C#中小函数的应用

    今天看到的一段函数 StringBuilder sb = new StringBuilder("sselect * from table where 1=1"); if(TextB ...

  6. 用wfastcgi在IIS下部署Django&Flask

    Django跟Flask在Linux底下都可以很方便地以FastCGI模式部署,貌似IIS下面不很好配置,而且IIS也缺少一个像PHPmanager一样的全自动配置工具,在公司服务器上部署起来颇费周折 ...

  7. 帝国cms灵动标签下常用标签

    这里简单整理下灵动标签下的常用标签 标题名称:<?=$bqr['title']?>  <?=esub($bqr[title],22)?> 限制字符22个 标题链接:<?= ...

  8. 磁珠在PCB中的应用

    1.磁珠的单位是欧姆,而不是亨特,这一点要特别注意.因为磁珠的单位是按照它在某一频率产生的阻抗来标称的,阻抗的单位也是欧姆.磁珠的 DATASHEET上一般会提供频率和阻抗的特性曲线图,一般以100M ...

  9. SSH 配置日记

    1   注意struts2-spring-plugin.jar的导入.    Unable to load configuration. - action  异常.需要导入这个包 2  很久都跑不通的 ...

  10. B - 楼下水题(扩展欧几里德)

    B - 楼下水题 Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...