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

  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail

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

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

首先看看调用函数:

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><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><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><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>欢迎来到 <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>畅游鄂西山水风光尽在 <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
posted on 2009-03-30 00:00  钱途无梁  阅读(505)  评论(0编辑  收藏  举报