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

其中的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. LOJ 1370 Bi-shoe and Phi-shoe（欧拉函数的简单应用）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1370 题意:给你n个整数,第i个整数为Xi.定义phi(k)为k的欧拉函数值,设pi为 ...

  2. linux下静态链接库的用法

    最近在Linux下编程发现一个诡异的现象,就是在链接一个静态库的时候总是报错,类似下面这样的错误: (.text+0x13): undefined reference to `func' 关于unde ...

  3. django1.4.5无法安装MySQLdb1.2.3

    解决办法是: yum install python-devel mysql-devel zlib-devel openssl-devel 然后再build.install

  4. 手机测试Android程序

    手机测试Android程序   上传者:sanpi329     我也要“分享赚钱” 2014/7/9 关注(23) 评论(0)   声明:此内容仅代表网友个人经验或观点,不代表本网站立场和观点.   ...

  5. MYSQL存储过程事务列子

    CREATE DEFINER=`root`@`localhost` PROCEDURE `createBusiness`(parameter1 int) BEGIN #Routine body goe ...

  6. IOS 定位服务与地图的应用开发

    1.定位服务 现在的移动设备很多都提供定位服务,IOS设备提供3种不同定位途径: (1)WiFi定位,通过查询一个WiFi路由器的地理位置的信息,比较省电:IPhone,IPod touch和IPad ...

  7. osgText::Text简介

    整理自<OpenSceneGraph三维渲染引擎编程指南> 在OSG中,为了显示高质量的文字,专门定义了一个新的名字空间来管理场景中的文字渲染,这个名字空间中的类主要用于加载字体和控制文字 ...

  8. Delphi调试DLL 不能调试 不能进入调试 注意！！！

    如何调试DLL,在这里就不再赘述了,但是,今天就碰到了一个特别奇怪的问题,参数设置正确,就是不能调试?? 通过上网查资料,发现了问题,注意: 1, 将Project主菜单的Project Option ...

  9. poj1061

    构造方程 (x + m * s) - (y + n * s) = k * l(k = 0, 1, 2,...) 变形为 (n-m) * s + k * l = x - y.即转化为模板题,a * x ...

  10. 01_什么是Elasticsearch

    Logstash是一个开源的用于收集,分析和存储日志的工具. Kibana4用来搜索和查看Logstash已索引的日志的web接口.这两个工具都基于 Elasticsearch. Logstash: ...