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

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

• 
• 
• 

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

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

首先看看调用函数：

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

完整的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; //位置偏移量其实也可以做为参数自定义，这里我就省了
         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>

最后是结构代码：

 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
<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>