JQuery制作的toolTip，针对图片预览效果

昨天做了一个文字版的toolTip，后来想想现在大家都爱看图，文字未免有点单调了点，那我们就来个图片式的预览。代码比较简单，我就不多说了。

• 
• 
• 

欢迎来到 买礼网 选购礼品！

畅游鄂西山水风光尽在 恩施旅游资讯网

首先看看调用函数：

1 j(document).ready( function () {
2  screenshotPreview('preview','x_preview','href');
3  screenshotPreview('screenshot','x_preview','rel');
4} );

完整的JS代码

 1  < script type = " text/javascript " >
 2  var  j  =  jQuery.noConflict();
 3  this .screenshotPreview  =   function (elink, preBox, URLsource){
 4       var  elemlink  =  elink;  // 要添加预览的链接
 5       var  previewBox  =  preBox;  // 预览用的视图框
 6       var  URL  =  URLsource;  // 预览图片地址来源
 7      
 8       var  positionScreen  =   function (event){
 9           var  tPosX  =  event.pageX  -   5 ;  // 位置偏移量其实也可以做为参数自定义，这里我就省了
10           var  tPosY  =  event.pageY  + 20 ;  //
11          j( ' . ' + previewBox).css({top:tPosY, left:tPosX}).fadeIn( " slow " );
12      };
13       var  showScreen  =   function (event){
14                   // 判断预览图片的地址来源
15           if (URL == ' rel ' ){             
16              thisURL  =  j( this ).attr( ' rel ' );    
17          } else   if (URL == ' href ' ){
18              thisURL  =  j( this ).attr( ' href ' );
19          } else   return   false ;
20          
21          thisTitle  =  j( this ).attr( ' title ' );  // 获取预览框的说明文字
22          j( this ).attr( ' title ' , '' );           // 临时性的将title设置为空，避免鼠标放上去系统默认的提示框出现
23           var  screenTxt  =  (thisTitle  !=   null ) ? " <p> " + thisTitle + " </p> "  :  "" ;
24          j( " <div class=' "   + previewBox +   " '><img src=' "   + thisURL +   " ' alt='showpic' /> "   + screenTxt +   " </div> " ).appendTo( " body " );
25           positionScreen(event);
26      };
27       var  hideScreen  =   function (){
28          j( this ).attr( ' title ' ,thisTitle);
29          j( ' . ' + previewBox).remove();
30      };
31      j( ' . ' +  elemlink).hover(showScreen,hideScreen).mousemove(positionScreen);
32  };
33 
34  j(document).ready( function (){
35      screenshotPreview( ' preview ' , ' x_preview ' , ' href ' );
36      screenshotPreview( ' screenshot ' , ' x_preview ' , ' rel ' );
37  });
38  < / script>

最后是结构代码：

 1 < div  class ="x_img" >  
 2      < ul >
 3          < li >< a  href ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_1.jpg"  class ="preview"  title ="" >< img  src ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_1s.jpg"  alt ="gallery thumbnail"   /></ a ></ li >
 4          < li >< a  href ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_2.jpg"  class ="preview"  title ="Fly fishing" >< img  src ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_2s.jpg"  alt ="gallery thumbnail"   /></ a ></ li >
 5          < li >< a  href ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_3.jpg"  class ="preview"  title ="Autumn" >< img  src ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_3s.jpg"  alt ="gallery thumbnail"   /></ a ></ li >
 6      </ ul >
 7      < div  class ="x_clear" ></ div >
 8 </ div >
 9
10 < div  class ="x_screen" >
11      < p > 欢迎来到  < a  href ="http://www.myliwu.com"  class ="screenshot"  rel ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r__-02.jpg"  title ="myliwu.com" > 买礼网 </ a >  选购礼品！ </ p >
12      < p > 畅游鄂西山水风光尽在  < a  href ="http://www.0718u.com"  class ="screenshot"  rel ="http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r__.jpg"  title ="0718u.com" > 恩施旅游资讯网 </ a ></ p >
13 </ div >