图片放大显示的jQuery插件

从网上下载了一个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页面代码

 

View Code
<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" title="张含韵">
                    <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" title="某不知名美女">
                    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                </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>
                <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>
                <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

 

 

posted @ 2011-12-18 20:01  流星剑  阅读(8193)  评论(0编辑  收藏  举报