我们检测到你可能使用了 AdBlock 或 Adblock Plus,请不要屏蔽素材鸟的广告嘛,请支持我们更好的发展下去。
你可以设定特殊规则或将素材鸟加入白名单,以便我们更好地为大家提供免费素材。
关闭
头像

利用jQuery实现仿淘宝图片放大镜插件imagezoom插件

来源:素材鸟 素材鸟 2018-06-05 16:01浏览(828) 收藏 点赞

素材鸟QQ群:73014387,在线充值,或联系QQ:201240120直接充值

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

利用jQuery实现仿淘宝图片放大镜插件imagezoom插件

部分代码

【html】

利用一个ul标签把需要放大的图片展示出来

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

【JS代码】

接着我们对大图带有样式.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")); 
    }); 
});


查看演示 下载资源:10 下载资源 下载积分:10积分
声明:本文为原创文章,如需转载,请注明来源www.sucainiao.com并保留原文链接:86.html
如果您觉得本文的内容对您的学习开发有所帮助,您可以打赏本篇文章,感谢!
评论3
头像
友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 201240120
  • 头像
    03月11日 14:13
    ikuaipay
    管理员,演示地址打不开啊,求演示地址