簡介

通過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://james.padolsey.com/demos/imgPreview/full/