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

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

• 
• 
• 

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

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

首先看看调用函数：

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

完整的JS代码

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

最后是结构代码：

< div  class ="x_img" >  
     < ul >
         < 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 >
         < 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 >
         < 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 >
     </ ul >
     < div  class ="x_clear" ></ div >
</ div >

< div  class ="x_screen" >
     < 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 >
     < 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 >
</ div >

转自： http://www.cnblogs.com/miqi2214/archive/2008/11/14/1333326.html

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/03/30/1424708.html