jQuery图片预览插件imgPreview

简介

通过imgPreview插件来实现鼠标移动到图片或者文字链接的上来实现图片预览的功能。链接一定要为图片才可以显示。

预览大图可以通过css来更改宽度，改变预览图片的大小。

 使用方法

1、HTML

< div  class ="zxx_out_box" >
     < div  class ="zxx_in_box" >        
         < h3  class ="zxx_title" >图片放大显示的jQuery插件演示页面 </ h3 >
         < div  class ="zxx_main_con" >
             < div  class ="zxx_test_list" >
                 < a  class ="preview"  href ="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" >
                      < img  src ="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"   />
                 </ a >
                 < a  class ="preview"  href ="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" >
                      < img  src ="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg"   />
                 </ a >
                 < a  class ="preview"  href ="3.jpg" >
                      < img  src ="big3.jpg"   />
                 </ a >                 
             </ div >           
         </ div >
     </ div >
</ div >

2、引入文件

<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$( function(){
 $("a.preview").preview();   
});
</script>

 

在线完整展示：http://demo.myxzy.com/imgPreview/index.htm

官网参数： http://james.padolsey.com/demos/imgPreview/full/