学步园

从网上下载了一个jquery的图片放大显示插件，效果如下

前台代码调用：

先引入js

<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>

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" title="张含韵">
                    <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" title="某不知名美女">
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                </a>
                <a class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" title="某不知名美女">
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
                </a>
                <a class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm4.jpg" title="某不知名美女">
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" />
                </a>
                <a class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm5.jpg" title="某不知名美女">
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
                </a>
            </div>           
        </div>
    </div>
</div>

全部源码下载：/Files/Jaylong/jquery-image-preview.zip