Javascript特效实现鼠标移动到小图，查看大图效果；

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 点小图看大图 </ title >
     < style  type ="text/css" >
        .imgStyle
         {
            margin :  10px ;
            padding :  2px ;
            border :  1px solid #000 ;
         }
     </ style >
     < script  language ="javascript"  type ="text/javascript" >
         var  data  =  {  " Images/01_small.jpg " : [ " Images/01.jpg " ,  " 图片1 " ],  " Images/02_small.jpg " : [ " Images/02.jpg " ,  " 图片2 " ],  " Images/03_small.jpg " : [ " Images/03.jpg " ,  " 图片3 " ] };   // Key:Value;

         function  LoadImg() {
             // 遍例小图（Key）地址；
             for  ( var  smallImgPath  in  data) {
                 // 动态创建一个img标签
                 var  smallImg  =  document.createElement( " img " );
                 // 动态添加Css样式；imgStyle为样式的类名；
                smallImg.className  =   " imgStyle " ;
                 // 给创建后的img赋值；（图片路径）
                smallImg.src  =  smallImgPath;
                 // 通过setAttribute改变大图片的(相对)路径;如果不这么写下面取到的会是绝对路径；
                smallImg.setAttribute( " a1 " , data[smallImgPath][ 0 ]);
                smallImg.setAttribute( " a2 " , data[smallImgPath][ 1 ]);
                smallImg.onmousemove  =   function  () {
                     // 取大图片的地址；
                    document.getElementById( " bigImg " ).src  =   this .getAttribute( " a1 " );
                     // 取大图片的标题；
                    document.getElementById( " imgTitle " ).innerHTML  =   this .getAttribute( " a2 " );
                     // 获取隐藏的层的id；
                     var  showDiv  =  document.getElementById( " showDiv " );
                     // 让显示的层的位置等于鼠标的位置；
                    showDiv.style.top  =  window.event.clientY;
                    showDiv.style.left  =  window.event.clientX  +   100 ;
                     // 显示层；
                    showDiv.style.display  =   " block " ;
                }
                    smallImg.onmouseout  =   function  () {
                    document.getElementById( " bigImg " ).src  =   this .getAttribute( " a1 " );
                    document.getElementById( " imgTitle " ).innerHTML  =   this .getAttribute( " a2 " );
                     var  showDiv  =  document.getElementById( " showDiv " );
                    showDiv.style.top  =  window.event.clientY;
                    showDiv.style.left  =  window.event.clientX  +   100 ;
                    showDiv.style.display  =   " none " ;
                }
                 // 加载到body中；
                document.body.appendChild(smallImg);
            }
        }
     </ script >
</ head >
< body  onload ="LoadImg()" >
     < div  id ="showDiv"  style ="display: none; position: absolute;" >
         < img  id ="bigImg"  src =""  width ="20%"  height ="20%"  alt =""   />
         < p  id ="imgTitle" >
         </ p >
     </ div >
</ body >
</ html >