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

其中的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. zoj 3708 Density of Power Network

    /*看英文和图我头都大了,不过很简单的.*/ #include<string.h> #include<stdio.h> ][],q[],w[]; int main(int ar ...

  2. win7程序关闭后弹出 程序兼容性助手 这个程序可能安装不正确 如果此程序没有正确安装，处理方式

    用WTL编写的程序,编译成release后,在win7上关闭后,弹出这个对话框 处理方法: 将这个xml文件命名成 xxx.exe.manifest,保存到指定目录下 <?xml version ...

  3. 【转】System.Data.OracleClient requires Oracle client software version 8.1.7 or greater

    安装完ASP.NET,Oracle9i客户端后,使用System.Data.OracleClient访问Oracle数据库如果出现这种错误:System.Data.OracleClient requi ...

  4. web开发注意的一些事

    js命名不要包含"-",在chrome浏览器是测试发现,如果文件包含"-",即使指定js本地缓存了,还会向服务器发送请求. cookie path 区分大小写

  5. linux如何关闭selinux？

    首先我们可以用命令来查看selinux的状态getenforce 这个命令可以查看到selinux的状态,当前可以看到是关闭状态的.还有一个命令也可以查看出selinux的状态.sestatus -v ...

  6. MyEclipse 怎样手动编译整个项目

    去掉自动编译的对勾,项目上就有build project,在菜单project->>build automatically. MyEclipse 菜单 Project->Build ...

  7. Qt之界面美化输入框（使用QSS确实非同凡响）

    我们先看下酷狗音乐的输入框效果图: 这里我们需要实现在输入框里面添加一个按钮(多个也一样),并且提供一个默认时候的文字..直接上代码好了. QHBoxLayout *lay = new QHBoxLa ...

  8. hdu 5269 ZYB loves Xor I(字典树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5269 思路分析:当lowbit(AxorB)=2p 时,表示A与B的二进制表示的0-p-1位相等,第p ...

  9. 今天刚申请成为Uber司机 已经接了5单了....大家有什么想问的吗？

    今天刚申请成为Uber司机  已经接了5单了....大家有什么想问的吗? 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版最新最详细注册流程)/ ...

  10. c#第五次作业---正文提取

    1.正文文本 1.正文文本 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC ...