jquery要如何实现在导航栏图片跟随鼠标

http://www.tera-online.com/
请参照这个网站，当鼠标在导航栏移动时，图片的一个边框是跟随着。这个用jquery要怎么实现。另外注意导航栏下面的游戏角色选择区，以我的理解应该用flash实现的，可是事实上不是！我想请教一下高手，导航栏的效果和下面的两部份，要怎么实现。现在jquery这么流行，我想用jquery应该比javascript更好用吧。

解决方案 »

  1.   

    导航部分可以参考下面的地址，有详细的说明
    http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
    下面也可以jq实现，你可以再去查查相关资料，我自己没做过。
      

  2.   


    本说明:
    把如下代码加入<body>区域中
    <DIV id=dot0 
    style="HEIGHT: 0px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 0px"></DIV>
    <DIV id=dot1 
    style="HEIGHT: 0px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 0px"><IMG 
    height=30 src="java2000.gif" width=88> </DIV>
    <DIV id=dot2 
    style="HEIGHT: 0px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 0px"><IMG 
    height=30 src="java2000.gif" width=88> </DIV>
    <SCRIPT language=JavaScript>
    <!-- 
    // define number of divs
    var nDots = 3;
    // define starting position of image
    var Xpos = 0;
    var Ypos = 0;
    // define speed of moving image
    var DELTAT = .01;
    // define how far the image drops from the cursor
    var SEGLEN = 10;
    // define how big is the loop the image makes around the cursor
    var SPRINGK = 10;
    // the greater the mass the slower the speed of image
    var MASS = 1;
    // the greater the gravity the smaller is the loop
    var GRAVITY = 50;
    // the greater the resistance the slower the speed of image
    var RESISTANCE = 10;
    var STOPVEL = 0.1;
    var STOPACC = 0.1;
    var DOTSIZE = 11;
    // define the size of the bounces of the image
    var BOUNCE = 0.75;
    var isNetscape = navigator.appName=="Netscape";
    var followmouse = true;
    var dots = new Array();
    init();
    function init()
    {
    var i = 0;
    for (i = 0; i < nDots; i++) {
    dots[i] = new dot(i);
    }
    if (!isNetscape) {
    //
    }
    for (i = 0; i < nDots; i++) {
    dots[i].obj.left = dots[i].X;
    dots[i].obj.top = dots[i].Y;
    } 
    if (isNetscape) {
    startanimate();
    } else {
    setTimeout("startanimate()", 3000);
    }
    }
    function dot(i) 
    {
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {   
    this.obj = eval("document.dot" + i);
    } else {
    this.obj = eval("dot" + i + ".style");
    }
    }
    function startanimate() {       
        setInterval("animate()", 20);
    }
    function setInitPositions(dots)
    {
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
    dots[i+1].X = startloc[i].offsetLeft
    startloc[i].offsetParent.offsetLeft - DOTSIZE;
    dots[i+1].Y = startloc[i].offsetTop +
    startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
    }
    function MoveHandler(e)
    {
    Xpos = e.pageX;
    Ypos = e.pageY;       
    return true;
    }
    function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;      
    }
    if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
    } else { document.onmousemove = MoveHandlerIE; }
    function vec(X, Y)
    {
    this.X = X;
    this.Y = Y;
    }
    function springForce(i, j, spring)
    {
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
    var springF = SPRINGK * (len - SEGLEN);
    spring.X += (dx / len) * springF;
    spring.Y += (dy / len) * springF;
    }
    }
    function animate() {    
    var start = 0;
    if (followmouse) {
    dots[0].X = Xpos;
    dots[0].Y = Ypos;       
    start = 1;
    }
    for (i = start ; i < nDots; i++ ) {
    var spring = new vec(0, 0);
    if (i > 0) {
    springForce(i-1, i, spring);
    }
    if (i < (nDots - 1)) { 
    springForce(i+1, i, spring);
    }
    var resist = new vec(-dots[i].dx * RESISTANCE,-dots[i].dy * RESISTANCE);
    var accel = new vec((spring.X + resist.X)/ MASS,(spring.Y + resist.Y)/ MASS + GRAVITY);
       dots[i].dx += (DELTAT * accel.X);
       dots[i].dy += (DELTAT * accel.Y);
    if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && 
    Math.abs(accel.X) < STOPACC && 
    Math.abs(accel.Y) < STOPACC) { 
    dots[i].dx = 0; 
    dots[i].dy = 0;
    } 
    dots[i].X += dots[i].dx;
    dots[i].Y += dots[i].dy;
    var height, width;
    if (isNetscape) {
    height = window.innerHeight + document.scrollTop;
    width = window.innerWidth + document.scrollLeft;
    } else {        
    height = document.body.clientHeight + document.body.scrollTop;
    width = document.body.clientWidth + document.body.scrollLeft;
    }
    if (dots[i].Y >=  height - DOTSIZE - 1) {
    if (dots[i].dy > 0) {
    dots[i].dy = BOUNCE * -dots[i].dy;
    }
    dots[i].Y = height - DOTSIZE - 1;
    }
    if (dots[i].X >= width - DOTSIZE) {
    if (dots[i].dx > 0) {
    dots[i].dx = BOUNCE * -dots[i].dx;
    }
    dots[i].X = width - DOTSIZE - 1;
    }
    if (dots[i].X < 0) {
    if (dots[i].dx < 0) {
    dots[i].dx = BOUNCE * -dots[i].dx;
    }
    dots[i].X = 0;
    }
    dots[i].obj.left = dots[i].X;                   
    dots[i].obj.top =  dots[i].Y;           
    }
    }
    // -->
    </SCRIPT>