文档章节

jq放大商品图,仿京东

史文帝
 史文帝
发布于 2018/03/06 22:51
字数 1052
阅读 35
收藏 0

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" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/b1.jpg" src="img/s1.jpg" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" onmousemove="preview(this);"></li>
                                <li><img class="w h" bimg="img/1.png" src="img/1.png" onmousemove="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>

 

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
现在有没有这一种jquery插件呢?

就是有一副大图,然后大图里面有个小框,然后把鼠标移到小框上,就显示小框里面的清晰的大图 有点类似于京东商品展示的jqzoom,但又有不同 jqzoom是把整幅图拿来局部放大,我是想在大图上只有...

北京冰帆科技
2011/04/25
1K
8
京东前端:三级列表页持续架构优化

王向维,京东商城三级列表页架构师。工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前端即服务器端做了大量的优化工作。 1. 京东三级列表页 三级列表...

fdhay
2016/08/08
68
0
完整APP项目源码(含服务)-仿京东分类

完整APP项目(含服务器源码)第二课 - 仿京东商品分类 首先分京东商品分类的结构:左边是一级分类 , 右边是二级分类, 二级分类下是三级分类, 如下图: 分析结构如下: 昨天是个listview , 右边是一...

kinga22
2016/08/27
6.5K
2
JAreaSelect 2.0.1,JavaScript 省市区三级联动选择插件

JAreaSelect 2.0.1 已发布。 更新内容 优化体验,为select添加默认值 修复仿京东样式的css样式bug 更新了地区数据,地区数据更精准,全面。 JAreaSelect JAreaSelect 区域选择插件是一个区域...

阳建
2017/09/15
1K
7
android 常用第三方插件收藏

1、android-vertical-slide-view : 仿照淘宝和聚美优品,在商品详情页,向上拖动时,可以加载下一页。使用ViewDragHelper,滑动比较流畅。 2、Android-MaterialRefreshLayout :这是一个下拉...

ch10mmt
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二进制取反

取反,是Java使用补码来表示二进制数,在补码表示中,最高位为符号位,正数的符号位为0,负数为1。 概念 编辑 补码的规定如下: 对正数来说,最高位为0,其余各位代表数值本身(以二进制表示)...

天王盖地虎626
今天
5
0
OSChina 周一乱弹 —— 可乐进化史

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 分享Radiohead的单曲《Creep》 《Creep》- Radiohead 手机党少年们想听歌,请使劲儿戳(这里) @EdmondFrank :刚...

小小编辑
今天
814
17
容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
5
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
25
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部