jQuery图片预览插件imgPreview

jQuery图片预览插件imgPreview_第1张图片


简介

通过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" >
                 < 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 >
                 < 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 >
                 < class ="preview"  href ="3.jpg" >
                      < img  src ="big3.jpg"   />
                 a >                 
             div >           
         div >
     div >
div >
复制代码

2、引入文件

复制代码



$( function(){
 $("a.preview").preview();   
});
复制代码

 

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

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


你可能感兴趣的:(PC端插件)