原生js轮播图(php)

这是一个使用原生JavaScript实现的轮播图,结合PHP,展示商品的QC图片。用户可以查看图片并进行确认或重新拍摄的决策。页面包含商品名称、订单号、尺码等详细信息,同时提供了移动端适配的布局和交互功能。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>QC Review - {{ optional($order_item_first->shopyy_orders)->itemno }} - {{ $order_item_first->goods_name }}</title>

    <link rel="stylesheet" href="/qc_style_shape/product.css">

    <link rel="stylesheet" href="/qc_style_shape/bottom.css">

    <!-- <link rel="stylesheet" href="/qc_style_shape/commom.css"> -->

    <link rel="stylesheet" href="/qc_style_shape/mobile11.css">

    <link href="/layui/css/layui.css" rel="stylesheet">

    <script src="/js/jquery-2.0.0.min.js"></script>

</head>

<body>

    @if (!empty(request('qc_confirm_id')))

    <input type="hidden" name="qc_confirm_id" id="qc_confirm_id" value="{{ request('qc_confirm_id') }}" />

    @else

    <input type="hidden" name="qc_confirm_id" id="qc_confirm_id" value="{{ base64_encode($order_item_first->id) }}" />

    @endif

    <!-- pc -->

    <div class="container-pc" id="pc">

        @if (!empty($store_first->qc_header))

            {!! $store_first->qc_header !!}

            {{-- <div class="header">

            <!-- 网站Logo -->

            <div class="log" style="display:flex;justify-content:center;">

                <a href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 260px; height: 55px;"></a>

            </div>

            <!-- 头部导航栏 -->

            <div class="navs" style=" width:1240px;height: 50px;">

                <ul class="clearfix">

                    <li>

                        <a href="javascript:;">New Releases</a>

                    </li>

                    <li>

                        <a href="javascript:;">HOME</a>

                    </li>

                    <li>

                        <a href="javascript:;">Jordan</a>

                    </li>

                    <li>

                        <a href="javascript:;">Yeezy</a>

                    </li>

                    <li>

                        <a href="javascript:;">Dunk</a>

                    </li>

                    <li>

                        <a href="javascript:;">StockPro|SP</a>

                    </li>

                    <li>

                        <a href="javascript:;">Retail Batch</a>

                    </li>

                    <li>

                        <a href="javascript:;">Nike</a>

                    </li>

                    <li>

                        <a href="javascript:;">Others</a>

                    </li>

                    <li>

                        <a href="javascript:;">promotions</a>

                    </li>

                    <li>

                        <a href="javascript:;">2022 TOP SETTING</a>

                    </li>

                </ul>

            </div>

            </div> --}}

        @else

            <div class="top">

                <a href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 260px; height: 55px;"></a>

                <a href="{{ $store_first->domain }}" target="_blank"><span style="font-size: 28px; font-weight: 700; margin-left: 100px; color: #1e9fff;">Go Back To Home</span></a>

        </div>

        @endif

        <div class="clear" style="height: 15px;overflow: hidden;clear: both;padding: 0;margin: 0;"></div>

        <div class="wrapper1">

            <!-- 面包屑 -->

            <div class="bread">

                <a href="{{ $store_first->domain }}"> home > </a>

                {{-- <a href="javascript:;"> Air jordan > </a>

                <a href="javascript:;"> Air jordan1 > </a>

                <a href="javascript:;"> jordan height > </a> --}}

                <span class="productname" style="font-size:17px"> QC Pictures</span>

            </div>

            <!-- 商品信息 -->

            <div class="product-info">

                <div class="left">

                    <div class="pictrue">

                        <div class="middle">

                            @forelse ($order_item_first->qc_goods_images_json as $infos)

                            @if ($loop->iteration == 1)

                            <img id="myImage" src="{{ $infos }}" alt="">

                            <div class="layer1"></div>

                        </div>

                        <div class="large" style="background-image: url({{$infos}})"></div>

                        @endif

                        @endforeach

                        <div class="small">

                            <ul class="smallPhoto">

                                <li style="z-index:131209348210948">

                                    @forelse ($order_item_first->qc_goods_images_json as $infos)

                                    <div class="smallPicBox" style="padding:2px;display:inline-block;"><img class="minipic " src="{{ $infos }}" alt=""></div>

                                    @empty

                                    <p>No QC Pictures</p>

                                    @endforelse

                                </li>

                            </ul>

                        </div>

                    </div>

                </div>

                <!-- 详细描述 -->

                <div class="right">

                    <div class="fontsize">

                        <div class="font">

                            <p class="productName"> Product name

                            </p>

                            <p class="article"><span>{{ $order_item_first->goods_name }}</span></p>

                            <p class="productName">Order number</p>

                            <p class="article"><span>{{ optional($order_item_first->shopyy_orders)->itemno }}</span></p>


 

                            <p class="productName" style="background-color: #fff;">Size </p>

                            <p p class="article"><span>

                                    @php

                                    $sku_one = interceptStringBehind($order_item_first->sku_value, "SIZE:");

                                    $sku_one_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "SIZE:"), '<br />');

                                    $sku_two = interceptStringBehind($order_item_first->sku_value, "Size:");

                                    $sku_two_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "Size:"), '<br />');

                                    echo (strpos($order_item_first->sku_value, 'SIZE:') !== false || strpos($order_item_first->sku_value, 'Size:') !== false) ? (($sku_one || $sku_two) ? ($sku_one ? ($sku_one_A ? $sku_one_A : $sku_one) : ($sku_two ? ($sku_two_A ? $sku_two_A : $sku_two) : $sku_two)) : $order_item_first->sku_value) : $order_item_first->sku_value;

                                    @endphp

                                </span></p>

                            <p class="productName">Member name </p>

                            <p p class="article"><span>{{ optional($order_item_first->shopyy_orders)->user_name }}</span></p>

                        </div>

                        <div class="font_button">

                            @if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

                            <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal confirm_qc btn1" style="line-height: 20px;">Satisfied</button>

                            @endif

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            @if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

                            <button type="button" style="line-height: 20px;" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger remake_qc btn2">Please retake QC</button>

                            @endif

                        </div>

                    </div>

                </div>

                <div class="bottom" style=" background-color: #393939;">

                    <p>Copyright © 2006-2023 {{ $store_first->name }} INC. All Rights Reserved. &nbsp;|&nbsp;<a href="{{ $store_first->domain }}" target="_blank">About Us</a></p>

                </div>

            </div>

        </div>

    </div>

    <!-- 移动端mobile -->

    <div class="mobile" id="mobile">

        <div class="wrapper">

            <!-- 网站Logo -->

            <div class="logo" style="margin-left:10px">

                <a class="logo" href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 160px; height: 30px;"></a>

            </div>

            <div class="proname" style="margin-left:-20px"><a href="{{ $store_first->domain }}" target="_blank"><span style="font-size:15px;font-weight:700;padding-left:30px; color: #1e9fff;">Go Back To Home</span></a></div>

            <!-- 主导航 -->

        </div>

        <div class="container-mobile">

            <div class="my-swipe van-swipe">

                <div class="van-swipe__track">

                    <div class="banner">

                        <!-- 轮播图容器 -->

                        <ul class="slider-wrap">

                            <li class="slider"><a href=""> @forelse ($order_item_first->qc_goods_images_json as $infos)

                                    <img class="bannerimg" style="display:inline-block;overflow:hidden;width: 100%;height:auto;margin-left:-3px;

                                    " οnclick="return false;" src="{{ $infos }}" alt="">

                                    @empty

                                    <p>No QC Pictures</p>

                                    @endforelse

                                </a>

                            </li>

                        </ul>

                        @forelse ($order_item_first->qc_goods_images_json as $infos)

                        @if ($loop->iteration == 1)

                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:#fff;z-index:99999999;width:768px;

height:100%;display:none;">

<div class="close" style="position:fixed;top:0;left:0;z-index:99999999;height:30px; ">

                                <span class="closeBtn" style="font-size :20px;width:20px;line-height:20px;position:fixed;top:0;">

                                <i class="layui-icon layui-icon-close" style="font-size: 30px; color: #333;"></i>

                           

                            </span>

                            </div>

                           

                            <div id="innerdiv" style="position:absolute;">

                                <img id="bigimg" style="border:5px solid #fff; margin:20px" src="{{$infos}}" />

                            </div>

                        </div>

                        @endif

                        @endforeach

                    </div>

                </div>

                <!-- 详细信息 -->

                <div class="right1">

                    <p class="title1" style="font-size: 30px;margin: 0 auto;height: 40px;line-height: 40px;text-align: center;margin-top: 20px;font-weight:700;">QC Pictures</p>

                    <div class="fontsize">

                        <!-- 下端商品信息相关样式 -->

                        <div class="font">

                            <p class="productName"> Product name

                            </p>

                            <p class="article1"><span>{{ mb_strlen($order_item_first->goods_name) >= 55 ? (mb_substr($order_item_first->goods_name, 0, 55) . "....") : $order_item_first->goods_name }}</span></p>

                            <p class="productName">Order number</p>

                            <p class="article1"><span>{{ optional($order_item_first->shopyy_orders)->itemno }}</span></p>


 

                            <p class="productName" style="background-color: #fff;">Size </p>

                            <p p class="article1"><span>

                                    @php

                                    $sku_one = interceptStringBehind($order_item_first->sku_value, "SIZE:");

                                    $sku_one_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "SIZE:"), '<br />');

                                    $sku_two = interceptStringBehind($order_item_first->sku_value, "Size:");

                                    $sku_two_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "Size:"), '<br />');

                                    echo (strpos($order_item_first->sku_value, 'SIZE:') !== false || strpos($order_item_first->sku_value, 'Size:') !== false) ? (($sku_one || $sku_two) ? ($sku_one ? ($sku_one_A ? $sku_one_A : $sku_one) : ($sku_two ? ($sku_two_A ? $sku_two_A : $sku_two) : $sku_two)) : $order_item_first->sku_value) : $order_item_first->sku_value;

                                    @endphp

                                </span></p>

                            <p class="productName">Member name </p>

                            <p p class="article1"><span>{{ optional($order_item_first->shopyy_orders)->user_name }}</span></p>

                        </div>

                    </div>

                </div>

            </div>

            <br>

            <br>

            <div class="font_button1">

                @if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

                <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal confirm_qc btn1">Satisfied</button>

                @endif

                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                @if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

                <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger remake_qc btn2">Please retake QC</button>

                @endif

            </div>

        </div>

        <div class="bottom

" style=" width:100%; background-color: #393939;">

            <p style="text-align:center;">Copyright © 2006-2023<br> {{ $store_first->name }} INC. All Rights Reserved. &nbsp;|&nbsp;<a href="{{ $store_first->domain }}" target="_blank">About Us</a></p>

        </div>

    </div>

    <br>

    <br>

    <br>


 

    <script src="/layui/layui.js"></script>

    <script>

        // 获取当前屏幕的宽度

        $(document).ready(function() {

            let width = document.body.clientWidth;

            if (width < 525) {

                $('#pc').hide()

                $('#mobile').show()

                // 轮播图(MOBILE)

                var li = document.querySelector('.slider');

                var lis = li.querySelectorAll('.bannerimg');

                // console.log(lis, 'lis.length');

                // 1.图片滚动

                // 获取banner宽度

                var w = lis[0].offsetWidth;

                var index = 0;

                var timer = setInterval(function() {

                    index++;

                    var translatex = -index * w;

                    li.style.transition = 'all .2s';

                    li.style.transform = 'translateX(' + translatex + 'px)';

                }, 2000);

                // 2.无缝滚动

                // 等图片过渡完成之后,再去判断监听过渡完成的事件

                li.addEventListener('transitionend', function() {

                    if (index >= lis.length) {

                        index = 0;

                        // 去掉过渡,让ul快速跳到目标位置

                        li.style.transition = 'none';

                        //利用最新的索引号乘以宽度 继续滚动图片

                        var translatex = -index * w;

                        li.style.transform = 'translateX(' + translatex + 'px)';

                    } else if (index < 0) {

                        index = 1;

                        li.style.transition = 'none';

                        //利用最新的索引号乘以宽度 继续滚动图片

                        var translatex = -index * w;

                        li.style.transform = 'translateX(' + translatex + 'px)';

                    }

                })

                // 4. 手指滑动轮播图

                // 触摸元素touchstart:获取手指初始坐标

                var startX = 0;

                var moveX = 0; // 后面会使用这个移动距离,所以要定义为全局变量

                var flag = false; //用来标志手指是否真的移动,还是只是点击

                li.addEventListener('touchstart', function(e) {

                    startX = e.targetTouches[0].pageX;

                    // 手指触摸的时候就停止定时器

                    clearInterval(timer);

                });

                // 移动手指touchmove:计算手指的滑动距离,并且移动盒子

                li.addEventListener('touchmove', function(e) {

                    // 计算移动距离

                    // e.targetTouches[0]为第一个手指,[1]表示第二个手指

                    moveX = e.targetTouches[0].pageX - startX;

                    // 移动盒子:盒子原来的位置 + 手指移动的距离

                    var translateX = -index * w + moveX;

                    // 手指拖动的时候,不需要动画效果,所以要取消过渡效果

                    li.style.transition = 'none';

                    li.style.transform = 'translateX(' + translateX + 'px)';

                    flag = true;

                    e.preventDefault(); //组织滚动屏幕的行为

                });

                // 手指离开,根据移动距离去判断是回弹还是播放上一张或者下一张

                li.addEventListener('touchend', function(e) {

                    // 只有手指移动过了,才执行下面的代码

                    if (flag) {

                        //(1)如果移动距离大于50像素,则播放上一张或者下一张

                        if (Math.abs(moveX) > 50) {

                            // 如果是右滑就是播放上一张,moveX是正值

                            if (moveX > 0) {

                                index--;

                            } else {

                                // 如果是左滑就是播放下一张,moveX是负值

                                index++;

                            }

                            // 用最新的index乘以宽度

                            var translateX = -index * w;

                            li.style.transition = 'all .3s';

                            li.style.transform = 'translateX(' + translateX + 'px)';

                        } else {

                            //(2)如果移动距离小于50像素就回弹

                            var translateX = -index * w;

                            li.style.transition = 'all .1s';

                            li.style.transform = 'translateX(' + translateX + 'px)';

                        }

                    }

                    // 手指离开的时候就重新开启定时器

                    // 注意:开启定时器之前要先清空之前的定时器,保证当前只有一个定时器在执行

                    clearInterval(timer);

                    timer = setInterval(function() {

                        index++;

                        var translateX = -index * w;

                        // 添加动画效果

                        li.style.transition = 'all .3s';

                        li.style.transform = 'translateX(' + translateX + 'px)';

                    }, 2000);

                });

                $('.close').css({

                    'top':6 + 'px',

                    'left': $(window).width()-30 +'px'

                })

                // 移动端图片预览放大功能

                $(function() {

                    $(".bannerimg").click(

                        function() {

                            var _this = $(this); //将当前的元素作为_this传入函数

                            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

                            //移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件

                            var eleImg = document.querySelector('#innerdiv');

                            var store = {

                                scale: 1

                            };

                            //定义移动端的初始位置

                            var position_top, position_left, pageX, pageY;

                            // 缩放事件的处理

                            //事件开始

                            eleImg.addEventListener('touchstart', function(event) {

                                event.preventDefault(); //阻止默认事件,防止底部内容滚动

                                //在触屏设备下,要判断是单指还是多指操作,可以通过event.touches数组对象的长度判断。

                                var touches = event.touches;

                                var events = touches[0]; //单指

                                var events2 = touches[1]; //双指

                                if (touches.length == 1) { //单指操作                        

                                    pageX = Number(events.pageX);

                                    pageY = Number(events.pageY);

                                    store.moveable = true;

                                    var _obj = $('#innerdiv');

                                    //  .css获取的值是字符串

                                    position_left = parseFloat(_obj.css('left')

                                        .split('px'));

                                    position_top = parseFloat(_obj.css('top')

                                        .split('px'));

                                } else {

                                    // 第一个触摸点的坐标

                                    store.pageX = events.pageX;

                                    store.pageY = events.pageY;

                                    store.moveable = true;

                                    if (events2) {

                                        store.pageX2 = events2.pageX;

                                        store.pageY2 = events2.pageY;

                                    }

                                    store.originScale = store.scale || 1;

                                }

                            }, {

                                passive: false

                            }); //passive: false必须加上,否则控制台报错

                            //开始移动

                            document.addEventListener('touchmove', function(event) {

                               

                                // event.preventDefault();//阻止默认事件,防止底部滚动

                                if (!store.moveable) {

                                    return;

                                }

                                var touches = event.touches;

                                var events = touches[0];

                                var events2 = touches[1];

                                if (touches.length == 1) {

                                    var pageX2 = Number(events.pageX);

                                    var pageY2 = Number(events.pageY);

                                    //控制图片移动

                                    $('#innerdiv').css({

                                        'top': position_top + pageY2 - pageY + 'px',

                                        "left": position_left + pageX2 - pageX + 'px'

                                    })

                                } else {

                                    // 双指移动

                                    if (events2) {

                                        // 第2个指头坐标在touchmove时候获取

                                        if (!store.pageX2) {

                                            store.pageX2 = events2.pageX;

                                        }

                                        if (!store.pageY2) {

                                            store.pageY2 = events2.pageY;

                                        }

                                        // 获取坐标之间的距离

                                        var getDistance = function(start, stop) {

                                            //用到三角函数

                                            return Math.hypot(stop.x - start.x,

                                                stop.y - start.y);

                                        };

                                        // 双指缩放比例计算

                                        var zoom = getDistance({

                                            x: events.pageX,

                                            y: events.pageY

                                        }, {

                                            x: events2.pageX,

                                            y: events2.pageY

                                        }) / getDistance({

                                            x: store.pageX,

                                            y: store.pageY

                                        }, {

                                            x: store.pageX2,

                                            y: store.pageY2

                                        });

                                        // 应用在元素上的缩放比例

                                        var newScale = store.originScale * zoom;

                                        // 最大缩放比例限制

                                        if (newScale > 3) {

                                            newScale = 3;

                                        }

                                        // 记住使用的缩放值

                                        store.scale = newScale;

                                        // 图像应用缩放效果

                                        eleImg.style.transform = 'scale(' +

                                            newScale + ')';

                                    }

                                }

                            }, {

                                passive: false

                            });

                            document.addEventListener('touchend', function() {

                                store.moveable = false;

                                delete store.pageX2;

                                delete store.pageY2;

                            });

                            document.addEventListener('touchcancel', function() {

                                store.moveable = false;

                                delete store.pageX2;

                                delete store.pageY2;

                            });

                        });

                    //移动端手指页面结束

                });

                //遮罩层图片位置(预览banner图层(放大拖拽))

                function imgShow(outerdiv, innerdiv, bigimg, _this) {

                    //这是刚才判断是否PC端的函数事件

                    var flag = IsPC();

                    console.log(flag);

                    var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性

                    $(bigimg).attr("src", src); //设置#bigimg元素的src属性

                    /*获取当前点击图片的真实大小,并显示弹出层及大图*/

                    $("<img/>").attr("src", src).load(function() {

                        //注意在使用这种方法获取窗口高度和宽度的时候,

                        //务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题

                        var windowW = $(window).width(); //获取当前窗口宽度

                        var windowH = $(window).height(); //获取当前窗口高度  

                        var realWidth = this.width; //获取图片真实宽度

                        var realHeight = this.height; //获取图片真实高度

                        var imgWidth, imgHeight;

                        var scale = 3; //缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                        if (realHeight > windowH * scale) { //判断图片高度

                            imgHeight = windowH * scale; //如大于窗口高度,图片高度进行缩放

                            imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度

                            if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度

                                imgWidth = windowW * scale; //再对宽度进行缩放

                            }

                        } else if (realWidth > windowW * scale) { //如图片高度合适,判断图片宽度

                            imgWidth = windowW * scale; //如大于窗口宽度,图片宽度进行缩放

                            imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度

                        } else { //如果图片真实高度和宽度都符合要求,高宽不变

                            if (flag == false) {

                                imgWidth = realWidth;

                                imgHeight = realHeight;

                            } else if (realWidth >= 1000) { //这里我怕图片太大又做了个判断

                                imgWidth = realWidth;

                                imgHeight = realHeight;

                            } else {

                                imgWidth = realWidth * 2;

                                imgHeight = realHeight * 2;

                            }

                        }

                        $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放

                        var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距

                        var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距

                        $(innerdiv).css({

                            "top": h,

                            "left": w

                        }); //设置#innerdiv的top和left属性

                        $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg

                    });

                    $(outerdiv).click(function() { //再次点击淡出消失弹出层

                        $(outerdiv).fadeOut("fast");

                       

                    });

                 

                 

                    $('.closeBtn').click(function() { //再次点击淡出消失弹出层

                        $(outerdiv).fadeOut("fast");

                     

                    });

                };

                function IsPC() {

                    var sUserAgent = navigator.userAgent;

                    if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {

                        return false;

                    } else {

                        return true;

                    }

                }

            } else {

               

                $('#pc').show()

                $('#mobile').hide()

                // PC JS

                // pc头部导航栏

                const topnavul = document.querySelector('.bread')

                //console.log(topnavul, '2top31232123123123');

                topnavul.addEventListener('mouseenter', function(e) {

                    if (e.target.tagName === 'A') {

                        // console.log(e.target.tagName, '213123123123');

                        e.target.parentNode.style.borderBottom = "2px solid #4bb2ff"

                    }

                })

                // pc端预览图层

                const small = document.querySelector('.small')

                const middle = document.querySelector('.middle')

                const large = document.querySelector('.large')

                let smallPicBox = document.querySelectorAll('.smallPicBox')

                smallPicBox[0].style.border = "2px solid #4bb2ff"

                // 切换图片

                small.addEventListener('click', function(e) {

                    if (e.target.tagName === 'IMG') {

                        // console.log(e, 123213213213213213213);

                        middle.querySelector('img').src = e.target.src

                        large.style.backgroundImage = `url(${e.target.src})`

                        e.target.style.backgroundColor = '#4bb2ff'

                        e.target.parentNode.style.border = "2px solid #4bb2ff"

                        const anotherParent = $(e.target.parentNode).siblings()

                        for (var j = 0; j < anotherParent.length; j++) {

                            anotherParent[j].style.border = ''

                        }

                    }

                })

                // 显示隐藏大图弹层

                let timerId = null

                const show = function() {

                    clearTimeout(timerId)

                    large.style.display = 'block'

                }

                const hide = function() {

                    clearTimeout(timerId)

                    timerId = setTimeout(function() {

                        large.style.display = 'none'

                    }, 20)

                }

                middle.addEventListener('mouseenter', show)

                middle.addEventListener('mouseleave', hide)

                // 鼠标进入大图(隐藏背景图)

                large.addEventListener('mouseenter', hide)

                large.addEventListener('mouseleave', hide)

                // 移动遮罩层和大图预览

                const layer1 = middle.querySelector('.layer1')

                document.addEventListener('mousemove', function(e) {

                    const position = middle.getBoundingClientRect()

                    const x = e.pageX - position.left,

                        y = e.pageY - position.top - document.documentElement.scrollTop

                    // 获取当前图片的高

                    let img = document.getElementById("myImage");

                    let height = img.height;

                    if (x >= 0 && x <= 700 && y >= 0 && y <= height) {

                        let mx = 0,

                            my = 0;

                        if (x <= 200) mx = 0

                        if (x > 200 && x < 500) mx = x - 100

                        if (x >= 500) mx = 500

                        if (y <= 200) my = 0

                        if (y > 200 && y < height - 100) my = y - 100

                        if (y >= height - 100) my = height - 200

                        layer1.style.left = mx + 'px'

                        layer1.style.top = my + 'px'

                        large.style.backgroundPositionX = -2 * mx + 'px'

                        large.style.backgroundPositionY = -2 * my + 'px'

                    }

                })

                middle.addEventListener('mouseenter', function() {

                    layer1.style.display = 'block'

                })

                middle.addEventListener('mouseleave', function() {

                    layer1.style.display = 'none'

                })

            }

        });

        //按钮(公共功能)

        $(".confirm_qc").click(function(e) {

            var qc_confirm_id = $("#qc_confirm_id").val();

            e.stopPropagation();

            e.preventDefault();

            //{{ config('app.api_url') }}

            var url = "/api/qc_confirm/confirm_qc";

            var tip;

            if (e.currentTarget.title == undefined || e.currentTarget.title == '') {

                tip = 'Are you sure you want to confirm QC?';

            } else {

                tip = e.currentTarget.title;

            }

            //询问框

            layer.confirm(tip, {

                title: "Tips",

                skin: 'layui-layer-black',

                icon: 7,

                btn: ['Determine', 'Cancel'] //按钮

            }, function() {

                layer.closeAll();

                $.post(url, {

                    qc_confirm_id: qc_confirm_id

                }, function(data) {

                    if (data.code == 100) {

                        location.reload();

                    } else {

                        layer.msg(data.msg);

                    }

                }, 'json')

            });

        });

        $(".remake_qc").click(function(e) {

            var qc_confirm_id = $("#qc_confirm_id").val();

            e.stopPropagation();

            e.preventDefault();

            var url = "/api/qc_confirm/remake_qc";

            var tip;

            if (e.currentTarget.title == undefined || e.currentTarget.title == '') {

                tip = 'Are you sure you want to reshoot QC?';

            } else {

                tip = e.currentTarget.title;

            }

            //询问框

            layer.confirm(tip, {

                title: "Tips",

                skin: 'layui-layer-black',

                icon: 7,

                btn: ['Determine', 'Cancel'] //按钮

            }, function() {

                layer.closeAll();

                $.post(url, {

                    qc_confirm_id: qc_confirm_id

                }, function(data) {

                    if (data.code == 100) {

                        location.reload();

                    } else {

                        layer.msg(data.msg);

                    }

                }, 'json')

            });

        });

    </script>

</body>

</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值