jQuery实现点击小图查看大图功能

演示地址： 点击查看

 前两天用Js实现在这个功能，现在在学习JQuery 也做了一下这个功能，多多练习，一切都会变的简单； 

 

<! 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 >
     < link  rel ="stylesheet"  type ="text/css"  href ="Css/Commom.css"   />
     < script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
     < 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  () {
            $.each(data,  function  (key, value) {
                 // 初始化最后一个div为隐蔽
                $( " div " ).last().hide();
                 // ket是小图的地址；
                 var  smallPath  =  $( " <img src=' "   +  key  +   " '/> " ).css( " margin " ,  " 5px " ).css( " padding " ,  " 2px " ).css( " border " ,  " 1px solid #000 " );
                 // 设置大图地址和名称；
                bigImgPath  =  smallPath.attr( " bigMapPath " , value[ 0 ]);
                bigImgName  =  smallPath.attr( " bigMapName " , value[ 1 ]);

                 // 给小图添加事件
                smallPath.mouseover( function  () {
                     // 最后一个div淡入效果
                    $( " div " ).last().fadeIn( " slow " );
                     // 获取大图地址
                    $( " #show " ).attr( " src " , $( this ).attr( " bigMapPath " ));
                     // 获取大图名称并设置样式
                    $( " #imgTitle " ).text($( this ).attr( " bigMapName " )).css( " background " ,  " #ebf1de " ).css( " padding " ,  " 10px " ).css( " margin-bottom " ,  " 10px " );
                });
                smallPath.mouseout( function  () {
                     // 指定最后一个div；
                    $( " div " ).last().fadeOut( " slow " );
                });
                 // .first方法，指第第一个DIV添加小图；（过滤器）
                $( " div " ).first().append(smallPath);
            });
        });
     </ script >
</ head >
< body >
     < div  class ="column" >
     </ div >
     < div  class ="column" >
         < p  id ="imgTitle" >
         </ p >
         < img  id ="show"  src =""  alt =""   />
     </ div >
</ body >

</ html>