用jquery实现类似淘宝的显示大图片

原码如下:
custom-test.js

var  G_PIC_DAT = " .jpg " ;          // 图片扩展名; 要求大图与小图扩展名相同
var  G_BIG_FIX = " -b.jpg " ;        // 大图的后缀形式,如pig.jpg(小图); pig-b.jpg(其对应大图)
var  G_BIG_ID = " bigImage " ;       // 显示块的id
var  G_PATH_PIC = " images/ " ;      // 图片存放路径。现在要求大图与小图存在同一目录下
var  G_BPIC_WIDTH = " 200 " ;        // 大图的大约的宽度 
var  G_CLIENTX;                 // 最大限制宽
var  G_CLIENTY;                   // 最大限制高
var  G_JQUERY_BIGIMG = " # " + G_BIG_ID;  // jquery表示的显示大图的块的id

$(document).ready( function ()  ... {
    $("img").mouseover(function()...{
        //var isShow = document.all(G_BIG_ID).style.display;
        if(this.src.indexOf(G_BIG_FIX) < 0 )...{
        
            var left = document.all[this.id].offsetLeft;
            var top = document.all[this.id].offsetTop;
            var width = document.all[this.id].width;
            var height = document.all[this.id].height;
            
            var bigImg = G_JQUERY_BIGIMG;
            
             //JS方式,实现显示
             /**//*
              var theVal = document.getElementById("bigImage");
              theVal.style.position="absolute";
              theVal.style.left = left+width+5;
              theVal.style.top = top;
              theVal.style.display="";
             */
             
            $(bigImg).css("position","absolute");
            $(bigImg).css("left",left+width+5);
            $(bigImg).css("top",top);
            var theVal = document.getElementById(G_BIG_ID);
            var src = this.src;
            src = src.substring(src.indexOf(G_PATH_PIC)+7,src.indexOf(G_PIC_DAT)) + G_BIG_FIX;
            src = G_PATH_PIC + src;
            theVal.src = src;
            $(bigImg).animate(...{opacity: 'show' }, 0);
        }
        
    });    

    $("img").mouseout(function()...{
        var left = document.all[this.id].offsetLeft;
        var top = document.all[this.id].offsetTop;
        var width = document.all[this.id].width;
        var height = document.all[this.id].height;

        //隐藏情况1: 垂直向下移动鼠标的隐藏情
        if(parseFloat(window.event.clientY) > parseFloat(top+height))...{
            //alert("1");
            $(G_JQUERY_BIGIMG).hide();
        }
        //隐藏情况2: 垂直向上移动鼠标的隐藏情况
        //alert(window.event.clientY +"/"+ top)
        if(parseFloat(window.event.clientY) < parseFloat(top))...{
            //alert("2");
            $(G_JQUERY_BIGIMG).hide();
        }
     

     $(G_JQUERY_BIGIMG).mouseout(function()...{
        $(G_JQUERY_BIGIMG).hide();        
     })

        
    });
    
} );

 
注:要应用jquery需要有实现jquery相应的包. 本文需要的图片存放在images路径下(相对路径).文件扩展名是.jpg.小图的文件名如:cat.jpg则对应的大图文件名为cat-b.jpg. 这些配置在ready()外以全局形式声明. 可以随意修改.
另附html代码:

< html >
< head >
< title > Onion Skin DropShadwo with jQuery </ title >
< style >
</ style >
< script  src ="lib/jquery.js"  type ="text/javascript" ></ script >
< script  src ="custom-test.js"  type ="text/javascript" ></ script >

< body >
< h1 > Change PIC - With jQuery </ h1 >

< div  class ="wrap0" >
< tr >
< img  id ='img1'  src ='images/1.jpg' >
< br >
< img  id ='img2'  src ='images/2.jpg' >
< br >
< img  id ='img3'  src ='images/3.jpg' >
</ tr >
</ div >

< span   >
    < img  id ='bigImage'  style ='display:none;' >
</ span >
 

</ body >
</ html >

注:  在html中引入了两个js,第一个是jquery的js; 第二个是上面那个js.
如果有用jquery的朋友可以共同探讨. msn: sunyadonghbjm@hotmail.com