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

其中的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. objective-C学习笔记（四）函数成员：方法（函数）

    函数分为:  全局函数(C语言函数) 成员函数(OBJC方法):实例方法 “-” 和类方法“+”的区别 //这里要区别静态变量(类变量).全局函数.常量的区别 OBJC里面,所有方法默认为公有方法.没 ...

  2. 转移服务器，DEDE网站遇到no input file specified！

    公司新配置了服务器,需要从旧服务器上把原来的站点迁移到新服务器,迁移.NET网站没有遇到任何问题,但是在迁移过来一个用DEDE做的网站后,访问首页出现No Input File Specified,后 ...

  3. mapper分页排序指定字段查询模板

    StudentQuery: package Student; import java.util.ArrayList; import java.util.List; public class Stude ...

  4. Core 发布至Linux

    ASP.NET Core 发布至Linux生产环境 Ubuntu 系统 ASP.NET Core 发布至Linux生产环境 Ubuntu 系统,之前跟大家讲解了 dotnet publish 发布,而 ...

  5. 使用django+celery+RabbitMQ实现异步执行

    http://www.yu180.com/group/view/259 推荐一个解决框架 https://github.com/maccman/juggernaut Realtime server p ...

  6. HDU 2852 KiKi's K-Number

    权值线段树 #include <cstdio> #include <cstring> const int N=200000,M=220000; int k,q,x,y,sum[ ...

  7. C++模板：文件操作

    freopen("demo.in","r",stdin); freopen("demo.out","w",stdout) ...

  8. MaxSubArray 最大子数列和

    public int maxSubArray(int[] A) { int newsum=A[0]; int max=A[0]; for(int i=1;i<A.length;i++){ new ...

  9. 图像检索：一维直方图+EMD距离

    EMD距离具体介绍已经在在这里已经给出. 思路:我们把一张图像的归一化的一维直方图作为signature的权值,也就是一般在比較两幅图像颜色直方图的EMD距离时,每一行的坐标一样,仅仅是权重值不一样. ...

  10. Ext JS学习第十四天 Ext基础之 Ext.DomHelper

    此文用来记录学习笔记   •我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具 ...