jq放大商品图，仿京东

最新推荐文章于 2024-07-17 10:40:32 发布
最新推荐文章于 2024-07-17 10:40:32 发布
阅读量187 收藏 1
点赞数
文章标签： git javascript ViewUI
原文链接：https://my.oschina.net/u/3010603/blog/1630698
版权

git仓库源码地址：https://gitee.com/wyycoing/frontend_practical_demo

git下载: https://gitee.com/wyycoing/frontend_practical_demo.git

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            .w430 {
                width: 430px;
            }

            .fl {
                float: left;
            }

            .w {
                width: 100%;
            }

            .h {
                height: 100%;
            }

            img {
                border: 0;
                vertical-align: middle;
            }

            .jqzoom {
                width: 100%;
                height: 100%;
                float: left;
                border: none;
                position: relative;
                padding: 0px;
                cursor: pointer;
                margin: 0px;
                display: block;
                text-align: center;
            }

            .spec-scroll {
                clear: both;
                margin-top: 20px;
                width: 100%;
            }

            .spec-scroll .prev,
            .spec-scroll .next {
                color: #DA3131;
                display: block;
                width: 13px;
                height: 72px;
                line-height: 72px;
                cursor: pointer;
                text-decoration: none;
            }

            .spec-scroll .next {
                float: right;
            }

            .y_pore {
                position: relative;
            }

            .spec-scroll .prev {
                float: left;
                margin-right: 4px;
            }

            .spec-scroll .next {
                float: right;
            }

            .f28 {
                font-size: 28px;
            }

            .spec-scroll .items {
                float: left;
                position: relative;
                width: 399px;
                height: 86px;
                overflow: hidden;
            }

            .spec-scroll .items ul {
                position: absolute;
                width: 999999px;
                height: 100%;
            }

            ol,
            ul {
                list-style: none;
            }

            .spec-scroll .items ul li {
                float: left;
                width: 80px;
                text-align: center;
            }

            .spec-scroll .items ul li img {
                border: 1px solid #E9E9E9;
                width: 72px;
            }

            .h430 {
                height: 430px;
            }

            .jqzoom {
                width: 100%;
                height: 100%;
                float: left;
                border: none;
                position: relative;
                padding: 0px;
                cursor: pointer;
                margin: 0px;
                display: block;
                text-align: center;
            }

            .zoomdiv {
                z-index: 100;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 350px;
                height: 350px;
                background: #ffffff;
                border: 1px solid #CCCCCC;
                display: none;
                text-align: center;
                overflow: hidden;
            }

            .spec-scroll-borimg {
                border: 1px solid #E45858 !important;
                padding: 1px !important;
            }

            .jqZoomPup {
                background-image: url(img/Transparent-bg.png);
                background-repeat: no-repeat;
                background-size: cover;
                z-index: 10;
                visibility: hidden;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 20px;
                height: 20px;
                border: 1px solid #aaa;
                opacity: 0.5;
                -moz-opacity: 0.5;
                -khtml-opacity: 0.5;
                filter: alpha(Opacity=50);
            }

            .spec-preview {
                width: 100%;
                border: 1px solid #E9E9E9;
            }

            .txt-gray-EAEAEA {
                color: #EAEAEA !important;
            }
        </style>
    </head>

    <body>
        <div class="w430 " style="margin:auto;">
            <!--产品参数开始-->
            <div id="preview" class="spec-preview h430">
                <span class="jqzoom">
                <img jqimg="img/b1.jpg" src="img/s1.jpg" class="w h"/></span>
                <!--默认的第一张图-->
            </div>
            <!--缩图开始-->
            <div class="spec-scroll">
                <a class="prev f28 y_pore">
                    < </a>
                        <a class="next f28 y_pore">
                            >
                        </a>
                        <div class="items">
                            <ul>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" οnmοusemοve="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" οnmοusemοve="preview(this);"></li>
                            </ul>
                        </div>
            </div>
            <!--缩图结束-->
        </div>
    </body>

</html>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script>
    function tabs(tabId, tabNum) {
        //设置点击后的切换样式
        $(tabId + " .tab li").removeClass("curr");
        $(tabId + " .tab li").eq(tabNum).addClass("curr");
        //根据参数决定显示内容
        $(tabId + " .tabcon").hide();
        $(tabId + " .tabcon").eq(tabNum).show();
    }
    //==================图片详细页函数=====================
    //鼠标经过预览图片函数
    function preview(img) {
        $("#preview .jqzoom img").attr("src", $(img).attr("src"));
        $("#preview .jqzoom img").attr("jqimg", $(img).attr("bimg"));
        $(".spec-scroll .items ul li img").removeClass("spec-scroll-borimg")
        $(img).addClass("spec-scroll-borimg")
    }
    $(function() {
        var tempLength = 0; //临时变量,当前移动的长度
        $(".spec-scroll .items ul li").eq(0).find("img").addClass("spec-scroll-borimg")
        if(tempLength <= 0) {
            $(".spec-scroll .prev").addClass("txt-gray-EAEAEA")
        }
        var viewNum = 5; //设置每次显示图片的个数量
        var moveNum = 2; //每次移动的数量
        var moveTime = 300; //移动速度,毫秒
        var scrollDiv = $(".spec-scroll .items ul"); //进行移动动画的容器
        var scrollItems = $(".spec-scroll .items ul li"); //移动容器里的集合
        var moveLength = scrollItems.eq(0).width() * moveNum; //计算每次移动的长度
        var countLength = (scrollItems.length - viewNum) * scrollItems.eq(0).width(); //计算总长度,总个数*单个长度

        $(".jqzoom").jqueryzoom({
            xzoom: 380,
            yzoom: 410
        });
        //上一张
        $(".spec-scroll .prev").bind("click", function() {
            if(tempLength > 0) {
                if(tempLength > moveLength) {
                    scrollDiv.animate({
                        left: "+=" + moveLength + "px"
                    }, moveTime);
                    tempLength -= moveLength;
                    $(".spec-scroll .next").removeClass("txt-gray-EAEAEA")
                } else {
                    scrollDiv.animate({
                        left: "+=" + tempLength + "px"
                    }, moveTime);
                    tempLength = 0;
                    $(".spec-scroll .prev").addClass("txt-gray-EAEAEA")
                }
            }
        });
        //下一张
        $(".spec-scroll .next").bind("click", function() {
            if(tempLength < countLength) {
                if((countLength - tempLength) > moveLength) {
                    scrollDiv.animate({
                        left: "-=" + moveLength + "px"
                    }, moveTime);
                    tempLength += moveLength;
                    $(".spec-scroll .prev").removeClass("txt-gray-EAEAEA")
                } else {
                    scrollDiv.animate({
                        left: "-=" + (countLength - tempLength) + "px"
                    }, moveTime);
                    tempLength += (countLength - tempLength);
                    $(".spec-scroll .next").addClass("txt-gray-EAEAEA")
                }
            }
        });

        $(".index_img_cn img").click(function() {
            var num = $(this).index()
            $(this).parent().find("img").removeClass("bo-red-D82D2Dx2")
            $(this).addClass("bo-red-D82D2Dx2")
            var img_url = $(this).attr("src");
            var this_Carousel = $(this).parents(".width-93p").find(".Carousel");
            this_Carousel.show(500);
            this_Carousel.find("img").attr("src", img_url)
            var num_max = $(this).parent().find("img").length - 1
            if(num == 0) {
                this_Carousel.find(".left").hide()
            } else {
                this_Carousel.find(".left").show()
            }
            if(num == num_max) {
                this_Carousel.find(".right").hide()
            } else {
                this_Carousel.find(".right").show()
            }
        })
        $(".Carousel .left").click(function() { //上一张图
            var img_box = $(this).parents(".width-93p").find(".index_img_cn")
            var index = 0;
            for(var i = 0; i < img_box.find("img").length; i++) {
                if(img_box.find("img").eq(i).hasClass('bo-red-D82D2Dx2')) {
                    index = i - 1;
                    $(this).parents(".width-93p").find(".index_img_cn img").removeClass("bo-red-D82D2Dx2")
                    $(this).parents(".width-93p").find(".index_img_cn img").eq(index).addClass("bo-red-D82D2Dx2")
                    var url = img_box.find("img").eq(index).attr("src")
                    $(this).parent().find("img").attr("src", url)
                    break;
                }
            }
            if(index == 0) {
                $(this).hide()
            }
            $(this).parents(".width-93p").find(".Carousel .right").show()
        })
        $(".Carousel .right").click(function() { //下一张图
            var img_box = $(this).parents(".width-93p").find(".index_img_cn")
            var index = 0;
            for(var i = 0; i < img_box.find("img").length; i++) {
                if(img_box.find("img").eq(i).hasClass('bo-red-D82D2Dx2')) {
                    index = i + 1;
                    $(this).parents(".width-93p").find(".index_img_cn img").removeClass("bo-red-D82D2Dx2")
                    $(this).parents(".width-93p").find(".index_img_cn img").eq(index).addClass("bo-red-D82D2Dx2")
                    var url = img_box.find("img").eq(index).attr("src")
                    $(this).parent().find("img").attr("src", url)
                    break;
                }
            }
            if(index == img_box.find("img").length - 1) {
                $(this).hide()
            }
            $(this).parents(".width-93p").find(".Carousel .left").show()

        })
    })
</script>

214933_Guzw_3010603.png

 

转载于:https://my.oschina.net/u/3010603/blog/1630698

chengzi5521
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
王迪
12-12 2410
使用jQuery制作产品放大镜效果实现效果： 使用jQuery制作产品放大镜效果实现原理： 通过设置图像的 CSS 属性（ left 和 top ），来实现图像的移动。 使用jQuery制作产品放大镜效果实现思路： （1）div+css布局，制作小图、放大镜和大图的布局。 （2）放大镜和大图，默认隐藏，鼠标移动到小图上时，显示放大镜和大图。 （3）鼠标在小图上移动时，控制放大镜和大图，同时进行移动 使用jQuery制作制作产品放大镜效果需要掌握的知识点： （1）基础div+.
jq仿京东商品详细页图片放大镜
06-11
jq仿京东商品详细页图片放大镜
CSS day12 移动端布局练习
qq_34620296的博客
09-13 730
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
jq实现放大镜查看商品大图效果
Something的博客
06-18 1781
&lt;div id="tab"&gt; &lt;!--中间区域--&gt; &lt;div class="mid-box"&gt; &lt;div class="zoom"&gt;&lt;/div&gt;&lt;!--放大镜--&gt; &lt;/div&gt;
jquery 商品图片放大效果
张先生
05-07 842
商品图片放大效果
jq仿京东商品详细页图片放大镜.zip
07-11
这个"jq仿京东商品详细页图片放大镜.zip"压缩包文件包含了一个利用jQuery库实现的类似京东商城商品详情页的图片放大镜特效。接下来，我们将深入探讨这个知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
jq仿京东商品详细页图片放大镜特效代码
03-20
总结，实现“jq仿京东商品详细页图片放大镜特效”涉及到jQuery基础、DOM操作、事件处理和一些前端性能优化技巧。这个特效不仅可以提升用户体验，也是前端开发者技能树中的一个重要部分。通过理解并实践这个效果，...
jq仿京东商品详细页图片放大镜.rar
11-09
本项目“jq仿京东商品详细页图片放大镜”是基于jQuery实现的一个功能，它模拟了京东电商网站上商品详细页面中的图片放大镜效果，让用户可以更清晰地查看商品细节。 首先，我们要理解这个功能的基本工作原理。图片...
仿京东淘宝放大镜特效 jqzoom.js
weixin_30611509的博客
05-23 468
效果图如下： HTML 文本源码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jqzoom仿京东商品详细页产品图片放大镜特效</title> 6 ...
jquery产品图片相册华丽切换效果
09-28
jquery产品图片相册华丽切换效果,精选代码
Cloud Zoom V3.1 破解版 JQ图片放大镜 更酷更炫
04-28
Cloud Zoom V3.1 破解版 JQ图片放大镜 更酷更炫
jquery.imagezoom图片放大镜插件仿淘宝店铺商品放大镜展示
05-19
满足传统商品展示，比如淘宝、京东的商品图片展示功能。特别是淘宝的商品图片均是用户自己上传的，有宽有窄，为了美观又必须让图片完全居中显示。
div+css+JQuery仿京东商品详情界面
09-08
div+css+JQuery仿京东商品详情界面
jq仿京东图片放大效果
Edward的web前端修炼之路
07-07 1399
今天在公司接到任务做一个商品图片放大的效果，于是查了很多资料花了一下午时间写了一个jq插件，废话不多说直接上代码我已经写了大量注释，大家可以自己看看。 (function($){ $.fn.jqueryzoom = function(options){ var settings = { xzoom: 200,//宽度 yzoom: 200,//高度 offset
JQuery（学习笔记七）JQuery仿京东产品详情页面
一枝韩独秀的博客
09-08 8931
主体模块 效果： 源码： https://download.csdn.net/download/weixin_42363997/10653458
一看就懂！jquery实现淘宝同款浏览图片放大镜简单代码
m0_52022213的博客
12-21 623
好多童鞋都在纠结放大镜怎么做的问题 没思路，不知道怎么打，从哪儿开始打，接下来我就把代码发到下面，还有注释！ 1：这是css代码块： <style> * { margin: 0; padding: 0; } #small { width: 500px; height: 500px; float: left; position: relative; margin-left: 200px;
CI/CD runners
最新发布
Andy的博客
07-17 426
GitLab runners介绍
前端 原生js/jq放大图片方法
07-12
在前端开发中，可以使用原生 JavaScript 或 jQuery 来实现图片的放大效果。下面分别给出两种方法： 1. 原生 JavaScript 方法： ```javascript // HTML 结构 // // CSS 样式 // .zoomable-image { // cursor: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值