l1024-jav/src/main/resources/static/js/my-picture.js

$(function () {
    initOther();
    search(1, true, false);
});

var scale = 1;  // 初始缩放比例
var lastfirstFlag = '';

/**
 * 初始化其他操作
 */
function initOther() {
    $(".slideDown-btn").click(function () {
        var display = $('.slideDown-box');
        if (display.css('display') == 'block') {
            display.slideUp("slow");
            $(this).html('展开  <i class="fa fa-angle-down"></i>');
        } else {
            display.slideDown("slow");
            $(this).html('收起   <i class="fa fa-angle-up"></i>');
        }
    });

    $("#searchbutton").click(function () {
        search(1, false, false);
    });
    $("#shaixuan").click(function () {
        $("#wd").val("");

        search(1, false, false);
    });
    $("#wd").keydown(function (e) {
        if (e.keyCode == 13) {
            search(1, false, false);
        }
    });
    $(".dropdown-box").find("li").click(function () {
        $("#bigType").text($(this).text());
        $("#bigType").attr("prepath", $(this).attr("prepath"));
        $(".dropdown-box").attr("style", "display: none;");

        if ($(this).text() == '足舐') {
            $(".lovefoot").attr("style", "display: block;");
        } else {
            $(".lovefoot").attr("style", "display: none;");
        }

        getQueryHeaderInfo($("#bigType").text(), false, true);
        search(1, false, true);
    });
    $(".dropdown-hover").mouseover(function () {
        $(".dropdown-box").attr("style", "display: block;");
    });
    $(".dropdown-hover").mouseout(function () {
        $(".dropdown-box").attr("style", "display: none;");
    });
    $(".clearAll").click(function () {
        $("#playvideo").find("video").attr("src", "");
        $("#bigpreview").find("img").attr("src", "");
        $("#playvideo").css("display", "none");
        $("#bigpreview").css("display", "none");
    });

    var minScale = 0.5;  // 最小缩放比例
    var maxScale = 3;    // 最大缩放比例
    var step = 0.05;     // 缩放步幅，改为较小值以平滑缩放
    $('#modal-image').on('mousewheel', function (event) {
        event.preventDefault();  // 防止页面滚动

        if (event.originalEvent.deltaY < 0) {
            // 鼠标滚轮向上滚动 -> 放大图片
            scale += step;
        } else {
            // 鼠标滚轮向下滚动 -> 缩小图片
            scale -= step;
        }

        // 限制缩放比例在 minScale 和 maxScale 之间
        scale = Math.min(Math.max(scale, minScale), maxScale);

        // 使用 CSS transform 属性缩放图片
        $('#modal-image').css('transform', 'scale(' + scale + ')');
    });
}

/**
 * 多条件搜索
 * @param pageNo
 */
function search(pageNo, startFlag, searchSelectFlag) {
    var genres = "";
    var cast = "";
    var keyword = "";
    if (searchSelectFlag) {
        $("#wd").val("");
    }
    if (!startFlag) {
        genres = $(".leixingul").find(".btn-warm").text().replace("全部", "");
        cast = $(".yanyuanul").find(".btn-warm").text().replace("全部", "");
        keyword = $("#wd").val();
    }

    var orderField = $(".paixuul").find(".btn-warm").attr("orderField");
    var order = $(".paixuul").find(".btn-warm").attr("order");
    var bigType = $("#bigType").text();
    var prepath = $("#bigType").attr("prepath");

    if (searchSelectFlag) {
        genres = "";
        cast = "";
        if (bigType == '爬虫') {
            genres = "福利吧";
            orderField = "fcil.publish_time";
        } else if (bigType == '上传') {
            genres = "";
            orderField = "fi.create_time";
        } else {
            orderField = "vi.issue_date";
        }

        order = "desc";
    } else {
        if (bigType == '爬虫') {
            genres = "福利吧";
            orderField = "fcil.publish_time";
        }
    }

    $.ajax({
        url: "pictureInfo/getPictureInfoPage", //请求的url地址
        dataType: "json", //返回格式为json
        data: JSON.stringify({
            "pageNo": pageNo,
            "pageSize": 10,
            "genres": genres,
            "cast": cast,
            "orderField": orderField,
            "order": order,
            "keyword": keyword,
            "bigType": bigType
        }), //参数值
        type: "post", //请求方式
        contentType: "application/json;charset=utf-8",
        async: true, //请求是否异步，默认为异步，这也是ajax重要特性
        success: function (data) {
            //请求成功时处理
            if (data != null && $.trim(data) != "" && data.success) {
                if (startFlag) {
                    getQueryHeaderInfo($("#bigType").text(), startFlag, false);
                }

                data = data.data;
                var picInfoList = data.list;
                var str = "";
                for (var i = 0; i < picInfoList.length; i++) {
                    var picInfo = picInfoList[i];

                    var date = picInfo.createTime;
                    if (orderField === 'fci.modify_time') {
                        date = picInfo.modifyTime;
                    }
                    if (bigType === '爬虫') {
                        date = picInfo.publishTime;
                    }

                    var scoreStr = '';
                    var orginUrl= '';
                    var picTagTop2 = '';
                    var title = '';
                    if (bigType === '上传') {
                        scoreStr += picInfo.size + '|';
                        scoreStr += picInfo.modifyTime;

                        picTagTop2 = picInfo.categoryName;
                        title = picInfo.remark;
                    } else if (bigType === '爬虫') {
                        scoreStr += picInfo.categoryName + '|';
                        scoreStr += picInfo.size + '|';
                        scoreStr += picInfo.modifyTime;

                        picTagTop2 = picInfo.sort;
                        title = picInfo.mainTitle;
                    } else {
                        scoreStr = picInfo.size;
                    }

                    str += "<li class=\"col-lg-8 col-md-6 col-sm-4 col-xs-3\">" +
                        "   <div class=\"myui-vodlist__box\">" +
                        "       <a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;" + picInfo.thumbnailPath + "&quot;),url(&quot;" + picInfo.path + "&quot;);\">" +
                        "           <span class=\"bigpreview playvideo play hidden-xs\" imgUrl='" + picInfo.path + "'></span>" +
                        "           <span class=\"pic-tag pic-tag-top\">" +
                        "               <span class=\"tag identificationDate\" title=\"" + orginUrl + "\" style=\"background-color: #00C0FF;\">" + date + "</span>" +
                        "               <span class=\"tag identificationDate\" title=\"" + orginUrl + "\" style=\"background-color: #00C0FF;\">" + picTagTop2 + "</span>" +
                        "           </span>" +
                        "           <span class=\"pic-text text-right\" title=\"\" \">" + scoreStr + "</span>" +
                        "       </a>" +
                        "       <div class=\"myui-vodlist__detail\">" +
                        "           <h4 class=\"videodetail title text-overflow\" orginUrl='" + picInfo.path + "'><a title=\" " + picInfo.remark + " \">" + picInfo.remark + "</a></h4>" +
                        "       </div>" +
                        "   </div>" +
                        "</li>";
                }
                $(".myui-vodlist").html(str);

                if (str == "") {
                    $(".vodlistnone").attr("style", "padding: 50px;display: block;");
                    $(".myui-page").html("");
                } else {
                    $(".vodlistnone").attr("style", "padding: 50px;display: none;");
                    $(".myui-page").pagination({
                        pageSize: "10",
                        pageNo: pageNo,
                        total: data.total,
                        callback: function (pageNo) {
                            //$("#wd").val("");

                            search(pageNo, false, false);
                        }
                    });
                }

                initContentEvent();
            } else {
                alert(data.message);
            }
        },
        beforeSend: function () {
            //请求前的处理
            if (startFlag) {
                $("#cover").css("display", "block");
            } else {
                $(".loading").css("display", "block");
            }
        },
        complete: function () {
            //请求完成的处理
            if (startFlag) {
                $("#cover").css("display", "none");
            } else {
                $(".loading").css("display", "none");
            }
        },
        error: function (data) {
            //请求出错处理
            alert('error：' + data);
        }
    });
}

/**
 *  查询头信息
 * @param bigType
 * @param startFlag
 */
function getQueryHeaderInfo(bigType, startFlag, searchSelectFlag) {
    var infantryType = "";
    if (bigType == '步兵' && !searchSelectFlag) {
        infantryType = $(".leixingul").find(".btn-warm").text().replace("全部", "");
    }
    $.ajax({
        url: "queryHeader/getQueryPictureHeaderInfo", //请求的url地址
        dataType: "json", //返回格式为json
        data: {"bigType": bigType, "infantryType": infantryType}, //参数值
        type: "post", //请求方式
        async: !startFlag, //请求是否异步，默认为异步，这也是ajax重要特性
        success: function (data) {
            if (bigType == '步兵') {
                $(".leixingli").css("display", "none");
            } else {
                $(".leixingli").css("display", "block");
            }
            if (searchSelectFlag) {
                $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
                $("ul.yanyuanul").find("a:eq(1)").addClass("btn-warm");
                $("ul.paixuul").find("a.btn-warm").removeClass("btn-warm");

                if (bigType == '足舐') {
                    $("ul.paixuul").find("a:eq(3)").addClass("btn-warm");
                } else if (bigType == '码池') {
                    $("ul.paixuul").find("a:eq(2)").addClass("btn-warm");
                } else {
                    $("ul.paixuul").find("a:eq(1)").addClass("btn-warm");
                }
            }

            //请求成功时处理
            if (data != null && $.trim(data.data) != "" && data.success) {
                data = data.data;
                if ($.isEmptyObject(data)) {
                    if ($(".displayli").length > 0) {
                        $(".displayli").remove();
                    }
                    $(".vodlistnone").attr("style", "padding: 50px;display: block;");
                    $(".myui-vodlist").html("");
                    $(".myui-page").html("");
                    return;
                }

                if ($(".displayli").length > 0) {
                    $(".displayli").remove();
                }
                if (data.videoCastList.length > 0) {
                    var videoCastList = data.videoCastList;
                    var str = "";
                    for (var i = 0; i < videoCastList.length; i++) {
                        var videoCast = videoCastList[i];
                        str += "<li class='displayli'><a class=\"btn searchbtn\" title='" + videoCast.count + "'>" + videoCast.name + "</a></li>";
                    }
                    $(".yanyuanul").append(str);
                }
                if (data.videoGenresList.length > 0) {
                    var videoGenresList = data.videoGenresList;
                    var str = "";
                    for (var i = 0; i < videoGenresList.length; i++) {
                        var videoGenres = videoGenresList[i];

                        if (bigType == '步兵' && i == 0) {
                            str += "<li class='displayli'><a class=\"btn btn-warm searchbtn\" title='" + videoGenres.count + "'>" + videoGenres.name + "</a></li>";
                        } else {
                            str += "<li class='displayli'><a class=\"btn searchbtn\" title='" + videoGenres.count + "'>" + videoGenres.name + "</a></li>";
                        }
                    }
                    $(".leixingul").append(str);
                }

                if (searchSelectFlag && bigType != '步兵') {
                    $("ul.leixingul").find("a.btn-warm").removeClass("btn-warm");
                    if (bigType == '足舐') {
                        $("ul.leixingul").find("a:eq(3)").addClass("btn-warm");
                    } else if (bigType == '码池') {
                        $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
                    } else {
                        $("ul.leixingul").find("a:eq(1)").addClass("btn-warm");
                    }
                }

                $(".searchbtn").unbind("click");
                $(".searchbtn").click(function () {
                    $(this).closest('ul').find(".searchbtn").removeClass("btn-warm");
                    $(this).addClass("btn-warm");

                    if ($(this).attr('order') != undefined) {
                        var order = $(this).attr('order');
                        if ("desc" == order) {
                            $(this).attr("order", "asc");
                        } else if ("asc" == order) {
                            $(this).attr("order", "desc");
                        }
                    }

                    $("#wd").val("");

                    search(1, false, false);
                });
            } else {
                alert(data.message);
            }
        },
        beforeSend: function () {
            //请求前的处理
            if (!startFlag) {
                $(".loading-shaixuan").css("display", "block");
            }
        },
        complete: function () {
            //请求完成的处理
            if (!startFlag) {
                $(".loading-shaixuan").css("display", "none");
            }
        },
        error: function (data) {
            //请求出错处理
            alert('error：' + data);
        }
    });
}

/**
 * 初始化主内容事件
 */
function initContentEvent() {
    $(".videodetail").click(function () {
        var orginUrl = $(this).attr("orginUrl");
        window.open(orginUrl, "_blank");
    });

    var currentIndex = -1; // 当前图片索引
    var bigpreviewlist = $("ul.myui-vodlist .bigpreview");
    if ($(".modal").is(':visible')) {
        if (lastfirstFlag === 'last') {
            currentIndex = 0;
        } else if (lastfirstFlag === 'first') {
            currentIndex = 9;
        }

        $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
    }
    lastfirstFlag = '';

    $(".bigpreview,.close").click(function () {
        if ($("#modal").css("display") === 'none') {
            $("#modal").css("display", "block");
            $("#modal").find("img").attr("src", $(this).attr("imgUrl"));

            currentIndex = bigpreviewlist.index(this);
        } else if ($("#modal").css("display") === 'block') {
            $("#modal").css("display", "none");
            $("#modal").find("img").attr("src", "");
        }

        scale = 1;
        $('#modal-image').css('transform', 'scale(' + scale + ')');
    });
    $("#modal").dblclick(function () {
        $(this).hide();
    });
    $(window).on('click', function(event) {
        var $modal = $('#modal');
        if ($(event.target).is($modal)) {
            $modal.hide();
        }
    });

    $(document).on('keydown', function (event) {
        if (event.key === "Escape" || event.keyCode === 27) {
            if ($("#modal").css("display") === 'block') {
                $("#modal").css("display", "none");
                $("#modal").find("img").attr("src", "");

                scale = 1;
                $('#modal-image').css('transform', 'scale(' + scale + ')');
            }
        } else if ($(".modal").is(':visible')) {
            // 左右方向键切换图片
            if (event.key === 'ArrowRight') {
                if (currentIndex === bigpreviewlist.length - 1) {
                    console.log("到头了end");

                    var xsPage = $("ul.myui-page > li.visible-xs").find("a").text();
                    var currentPageNo = xsPage.split("/")[0];
                    var totalPageNo = xsPage.split("/")[1];
                    if (currentPageNo === totalPageNo) {
                        alert("真到头了end");
                    } else {
                        unbindPageEvent();

                        lastfirstFlag = 'last';
                        $(".myui-page").find("#last-page").click();
                        $("#modal").find("img").attr("src", "cover/loading.gif");
                    }
                } else {
                    currentIndex = (currentIndex + 1) % bigpreviewlist.length;  // 循环切换到下一张图片
                    $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
                }
            } else if (event.key === 'ArrowLeft') {
                if (currentIndex === 0) {
                    console.log("到头了start");

                    var xsPage = $("ul.myui-page > li.visible-xs").find("a").text();
                    var currentPageNo = xsPage.split("/")[0];
                    var totalPageNo = xsPage.split("/")[1];
                    if (currentPageNo === '1') {
                        alert("真到头了start");
                    } else {
                        unbindPageEvent();

                        lastfirstFlag = 'first';
                        $(".myui-page").find("#first-page").click();
                        $("#modal").find("img").attr("src", "cover/loading.gif");
                    }
                } else {
                    currentIndex = (currentIndex - 1 + bigpreviewlist.length) % bigpreviewlist.length;  // 循环切换到上一张图片
                    $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
                }
            }
        }
    });
}

function unbindPageEvent() {
    $(document).off('keydown');
    // $(window).off('click');
    $(".close").off('click');
}