jQuery仿淘宝图片放大镜插件imagezoom

imagezoom用于放大查看商品图片,在凡客,京东,淘宝等商城商品详情页等都有图片放大镜效果

2016-08-24 9637 64 2
软件描述

HTML

首先我们先放四张图片:

<ul class="tb-thumb" id="thumblist"> 
    <li class="tb-selected"> 
        <div class="tb-pic tb-s40"> 
            <a href="#"> 
                <img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg" 
                /> 
            </a> 
        </div> 
    </li> 
    <li> 
        <div class="tb-pic tb-s40"> 
            <a href="#"> 
                <img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg" 
                /> 
            </a> 
        </div> 
    </li> 
    <li> 
        <div class="tb-pic tb-s40"> 
            <a href="#"> 
                <img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg" 
                /> 
            </a> 
        </div> 
    </li> 
    <li> 
        <div class="tb-pic tb-s40"> 
            <a href="#"> 
                <img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg" 
                /> 
            </a> 
        </div> 
    </li> 
    <li> 
        <div class="tb-pic tb-s40"> 
            <a href="#"> 
                <img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg" 
                /> 
            </a> 
        </div> 
    </li> 
</ul>

jQuery

接着我们对大图带有样式.jqzoom进行插件调用。当点击缩略图的时候,切换大图的图片。

$(function() { 
    $(".jqzoom").imagezoom(); 
    $("#thumblist li a").click(function() { 
        $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected"); 
        $(".jqzoom").attr('src', $(this).find("img").attr("mid")); 
        $(".jqzoom").attr('rel', $(this).find("img").attr("big")); 
    }); 
});


举报

资源举报

举报审核通过将会奖励威望

×
收藏 下载

jQuery仿淘宝图片放大镜插件imagezoom

我的威望:0已下载次数:64

登录、发帖、回帖、上传资源可获得威望

所需威望:0开始下载
网盘链接:  访问密码:
×

讨论这个工具(2)

最假男程序
2016-12-03 10:44

666666666666666666666

二当家的
2017-03-10 14:28

666

请登录后发表评论