jQuery图片预览插件imgPreview

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

简介

通过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/

           

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow