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

其中的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. C++知识点整理——持续更新

    virtual是C++的一个关键字,virtual修饰的函数可以被子类重写.   用法:在返回值类型的前面添加关键字即可. override是C++的保留字(注意不是关键字),表示当前函数重写了基类的 ...

  2. BZOJ 1449: [JSOI2009]球队收益( 最小费用最大流)

    先考虑假如全部输了的收益. 再考虑每场比赛球队赢了所得收益的增加量,用这个来建图.. --------------------------------------------------------- ...

  3. java 去除数组重复数据，并输出重复数据值

    /** * 去除重复数据 * @author Sunqinbo */ public class RemoveDuplicateData { public static void main(String ...

  4. A Byte of Python 笔记（10）输入/输出：文件和储存器

    第12章  输入/输出 大多数情况下,我们需要程序与用户交互.从用户得到输入,然后打印一些结果. 可以分别使用 raw_input 和 print 语句来完成这些功能.对于输出,可以使用多种多样的 s ...

  5. fiddler---使用方法1--抓取手机app包

    1.首先fiddler设置

  6. iOS 之播放系统声音

    导入框架: 代码: #import <UIKit/UIKit.h> #import <AudioToolbox/AudioToolbox.h> @interface MsgPl ...

  7. jQuery json数据处理

    一种是使用jQuery的ajax函数  另一种是使用getJSON函数 使用ajax函数的时候 对于返回值类型dataType 亲自指定为json格式 就无需自己手动处理格式 $.ajax({ url ...

  8. 模拟美萍加密狗--Rockey2虚拟狗(四)

    目录(?)[+]       首先,抱怨一下.学校个破网,似乎把我端口封了,死活分不上IP,也许是是我MAC改的太频繁了,有盗号嫌疑…… 然后,正文开始…… 其实虚拟狗几天前就写完了,可这几天上不了网 ...

  9. QString类的使用（无所不包，极其方便）

    Qt的QString类提供了很方便的对字符串操作的接口. 使某个字符填满字符串,也就是说字符串里的所有字符都有等长度的ch来代替. QString::fill ( QChar ch, int size ...

  10. QT实现拖放文件（有例子，并且图文并茂，非常清楚）

    转自:http://my.oschina.net/voler/blog/345722 目录[-] 0. 源代码下载地址 1. 简单文件拖放 2. 复杂文件拖放 3. 通过按钮来完成列表数据的转移 4. ...