弹窗的图片鼠标滑动可以放大和缩小

<%@ page import="cn.jiguang.common.utils.StringUtils" %>
<%@ page import="com.navi.base.service.IDataService" %>
<%@ page import="com.velcro.base.BaseContext" %>
<%@ page import="com.velcro.base.security.service.acegi.VelcroUser" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: czm42
  Date: 2021/11/22
  Time: 18:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>




    
    
    
    互动问答
    
    <script src="/kms/js/jquery-1.12.4.min.js"></script>
    <script src="/kms/js/kindeditor4.1.10/kindeditor-min.js"></script>
    <script src="/kms/js/kindeditor4.1.10/addRichEditor.js"></script>




    
        
        客服
    

    
    
        
            
            
                
                    
                              
                                
                                  ${h.answerTime}
                                

                              

                    
                    
                        
                        
                            ${h.customerName}

                            ${h.problem}

                        

                    

                    
                    
                        
                        
                            客服中心

                            ${h.answer}

                        

                    

                

                
                    
                    
                        
                                <%--22:29--%>
                            上次聊到这里

                        

                    

                

                
                
                    
                    
                        
                            
                                
                                
                                猜你想问
                            

                            <%--
                                
                                换一换
                            
--%>
                        

                        
                        
                            
                                
                                    ${h.title}

                                    
                                

                            
                        

                    

                

            

            
            
                猜你想问
                
                    
                        
                            ${c.categoryName}
                        
                        
                            ${c.categoryName}
                        
                    
                
                
                <%--
                    是否公开：
                
--%>
            

            
            
                
                
                    发送

                

                
                
                

            

        

        
            
            
                相关回答

                热点回答

            

            
            
                
                
                    
                        ${r.title}

                    
                

                
                
                    
                        ${h.title}

                    
                

            

        

    





<script>
    function setdisplay() {
        if($('.display').css("display")=='none'){
            $('.display').show();
        }else {
            $('.display').hide();
        }
    }
    $(function () {
        getScroll();
        // 相关回答和热点回答的切换
        /*var answer = $('.right-hd').children()
        answer.click(function () {
            $(this).addClass('currentAnswer').siblings('div').removeClass('currentAnswer')
            // 内容切换
            $('.right-bd .item').eq($(this).index()).show().siblings().hide()
        })*/
        $('.right-hd .right-hd-item').on('click', function () {
            $(this).addClass('currentAnswer').siblings('div').removeClass('currentAnswer')
            $('.right-bd .item').eq($(this).index()).show().siblings().hide()
        });

        // 多行文本框的值
        $('.textarea').on('input', function () {
            // 输入框有值后触发
            if ($(this).val().length > 0) {
                $.post(
                    "/kms/faq/likeQuestion.do",
                    {
                        "question": $('.textarea').val()
                    },
                    function (data) {
                        $(".recom").html("");
                        if (data.list.length != 0) {
                            $.each(data.list, function (index, item) {
                                //console.log(index, item);
                                var searchText = $('.textarea').val();//获取你输入的关键字；
                                var regExp = new RegExp(searchText, "i");
                                var result=regExp.exec(item.title);
                                var newHtml = item.title.replace(regExp, ""+result+"");
                                var recomHTML =
                                    ""+
                                    "" +
                                    newHtml
                                    + "
"+
                                    "
";
                                $(".recom").append(recomHTML)
                            });
                            $('.recom').show();

                            // 推荐列表
                            recomClint();
                        }
                    }, "json"
                );
            } else {
                $('.recom').hide()
            }
        });


        $('.send-btn').on('click', function (e) {
            userClick();
        });

        //猜你想问切换分类
        $('.guess-item').children("span").on('click',function(){
            console.log($(this).attr("id"));
            $.post(
                "/kms/faq/getCategoryData.do",
                {
                    "cate":$(this).attr("id")
                },
                function (data){
                    var html = '';
                    let arr = JSON.parse(data)
                    console.log(arr);
                    arr.question.forEach(function(item,index,obj){
                        if(index<=4) {
                            html += "\n" +
                                "   " + item.title + "
\n" +
                                "   \n" +
                                "
";
                        }
                    });
                    if (html ===''){
                        html += "\n" +
                            "   暂时没有此类型的问答
\n" +
                            "
";
                    }
                    $(".relevant-bd").empty();
                    $(".relevant-bd").append(html);
                    var html=$("#acqlist").prop("outerHTML");
                    $("#acqlist").remove();
                    $('.interflow').append(html);
                    getScroll();
                }
            )
        })


    });

    // 客户消息回复模板
    var customerHtml =
        "\n" +
        "  \n" +
        "  \n" +
        "           客服中心
\n" +
        "     没有找到相关问题或答案，您可以点击这里前往问答流程提问 
\n" +
        "  
\n" +
        "
";
    // 在父元素中末尾处添加
    // $('.interflow').append(customerHtml)

    // 相关回答与相关回答的点击事件
    $('.right-bd .item').children().on('click', function () {
        // 用户的模板字符串
        var usrHtml =
            "" +
            "  " +
            "  " +
            "      " +
            "      " + $(this)[0].innerText + "
" +
            "  
" +
            "
";
        $('.interflow').append(usrHtml);
        getScroll();
        var currentStr = $(this)[0].innerText;

        //获取答案
        $.post(
            "/kms/faq/getQuestionAnswer.do",
            {
                "question": $(this).text()
            },
            function (data) {
                if (data.question != null) {
                    // 客户消息回复模板
                    var serviceHTML =
                        "\n" +
                        "  \n" +
                        "  \n" +
                        "           客服中心
\n" +
                        "     "+data.question.content+"
\n" +
                        "  
\n" +
                        "
";
                    $('.interflow').append(serviceHTML);
                    getScroll();
                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":data.question.replyersId,
                            "answerName":data.question.replyersName,
                            "answer":data.question.content
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )
                }else{

                    $('.interflow').append(customerHtml);
                    getScroll();
                    /*var isopen;
                    if($("#isopen").is(":checked")){
                        isopen = "40288110301fdb1601301fedb6080096";
                    }else{
                        isopen = "40288110301fdb1601301fedb6080097";
                    }


                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":null,
                            "answerName":"客服中心",
                            "isopen":isopen,
                            "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )*/
                }
            }, "json"
        )
    });

    function recomClint() {
        // 推荐列表
        $('.recom').children().on('click', function () {
            $('.textarea').val($(this)[0].outerText);
            $('.recom').hide()
            // 清空输入框的值
            $('.textarea').val('');
        })
    }

    recomClint();

    // 猜你想问
    $(document).children().on('click','.ellipsis', function () {
        // 用户的模板字符串
        var usrHtml =
            "\n" +
            "  \n" +
            "  \n" +
            "      \n" +
            "      " + $(this)[0].innerText + "
\n" +
            "  
\n" +
            "
";
        $('.interflow').append(usrHtml);
        getScroll();
        var currentStr = $(this)[0].innerText;

        //获取答案
        $.post(
            "/kms/faq/getQuestionAnswer.do",
            {
                "question": $(this)[0].innerText
            },
            function (data) {
                if (data.question != null) {
                    // 客户消息回复模板
                    var serviceHTML =
                        "\n" +
                        "  \n" +
                        "  \n" +
                        "           客服中心
\n" +
                        "     "+data.question.content+"
\n" +
                        "  
\n" +
                        "
";

                    //图片点击事件
                    getPhoto(serviceHTML);


                    // $('.interflow').append(serviceHTML);
                    getScroll();
                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":data.question.replyersId,
                            "answerName":data.question.replyersName,
                            "answer":data.question.content
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )
                }else{
                    $('.interflow').append(customerHtml)
                    getScroll();
                    /*var isopen;
                    if($("#isopen").is(":checked")){
                        isopen = "40288110301fdb1601301fedb6080096";
                    }else{
                        isopen = "40288110301fdb1601301fedb6080097";
                    }


                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":null,
                            "answerName":"客服中心",
                            "isopen":isopen,
                            "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )*/
                }
            }, "json"
        )
    });

    // 用户消息发送
    function userClick(){
        if ($('.textarea').val().length > 0) {
            // 用户的模板字符串
            var usrHtml =
                "\n" +
                "  \n" +
                "  \n" +
                "        \n" +
                "        " + $('.textarea').val() + "
\n" +
                "  
\n" +
                "
";
            // 在父元素中末尾处添加
            $('.interflow').append(usrHtml);
            getScroll();
            // 推荐隐藏
            $('.recom').hide();

            var currentStr = $('.textarea').val();

            //获取答案
            $.post(
                "/kms/faq/getQuestionAnswer.do",
                {
                    "question": $('.textarea').val()
                },
                function (data) {
                    //console.log("data = "+data);
                    if (data.question != null) {
                        // 客户消息回复模板
                        var serviceHTML =
                            "\n" +
                            "  \n" +
                            "  \n" +
                            "           客服中心
\n" +
                            "     "+data.question.content+"
\n" +
                            "  
\n" +
                            "
";
                        //图片点击事件
                        getPhoto(serviceHTML)
                        // var serviceHTMLnode = $(serviceHTML);
                        // serviceHTMLnode.find('.content-wrap').click(function (e) {
                        //     if (e.target.nodeName.toLowerCase() == 'img') {
                        //         var imgUrl = $(e.target).attr('src')
                        //         var imgMask = $('
')
                        //         imgMask.click(function () {
                        //             $(this).remove()
                        //         })
                        //         $(window.parent.document.body).append(imgMask[0])
                        //     }
                        // })
                        // $('.interflow').append(serviceHTMLnode);
                        getScroll();

                        //记录聊天记录
                        $.post(
                            "/kms/faq/saveChat.do",
                            {
                                "problem":currentStr,
                                "answerId":data.question.replyersId,
                                "answerName":data.question.replyersName,
                                "answer":data.question.content
                            },
                            function(data){
                                console.log("保存是否成功:"+data.success)
                            }
                        )
                    }else{
                        $('.interflow').append(customerHtml);
                        getScroll();
                        /*var isopen;
                        if($("#isopen").is(":checked")){
                            isopen = "40288110301fdb1601301fedb6080096";
                        }else{
                            isopen = "40288110301fdb1601301fedb6080097";
                        }

                        //记录聊天记录
                        $.post(
                            "/kms/faq/saveChat.do",
                            {
                                "problem":currentStr,
                                "answerId":null,
                                "answerName":"客服中心",
                                "isopen":isopen,
                                "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                            },
                            function(data){
                                console.log("保存是否成功:"+data.success)
                            }
                        )*/
                    }
                }, "json"
            );
        }
        // 清空输入框的值
        $('.textarea').val('');
    }

    document.onkeydown = function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();//禁止回车键换行
            userClick();
        }
    }
    function getScroll() {//保持显示滚动最后
        $('.interflow').scrollTop( $('.interflow')[0].scrollHeight);
    }

    function getPhoto(serviceHTML){//发送消息拼接图片事件
        var serviceHTMLnode = $(serviceHTML);
        serviceHTMLnode.find('.content-wrap').click(function (e) {
            if (e.target.nodeName.toLowerCase() == 'img') {
                var imgUrl = $(e.target).attr('src')
                var imgMask = $('
')

                imgMask.find('img').on('mousewheel', function () {//图片缩放
                    Picture(this)
                    return false
                })

                imgMask.click(function () {
                    $(this).remove()
                })
                $(window.parent.document.body).append(imgMask[0])
            }
        })
        $('.interflow').append(serviceHTMLnode);
    }
</script>

<script type="text/javascript">

</script>


<script type="text/javascript">

    $(function () {
        setImg();
    })
    function setImg() {//历史数据图片循环点击
        $(".customer-service").each(function(){
                $(this).find('.content-wrap').click(function (e) {
                    if (e.target.nodeName.toLowerCase() == 'img') {
                        var imgUrl = $(e.target).attr('src')
                        var imgMask = $('
')

                        imgMask.find('img').on('mousewheel', function () {//图片缩放
                            Picture(this)
                            return false
                        })

                        imgMask.click(function () {
                            $(this).remove()
                        })
                        $(window.parent.document.body).append(imgMask[0])
                    }
                })
        });
    }


    <%--实现滚动图片放大缩小--%>
    var  count=10;
    function Picture(imgNode) {
        count = Counting(count);
        Resize(count, imgNode);
    }
    function Counting(count) {
        if (event.wheelDelta >= 120){
            count++;
        } else if (event.wheelDelta <= -120) {
            count--;
        }
        return count;
    }
    function Resize(count, imgNode){
        imgNode.style.zoom = count + '0%';
        // oCounter.innerText = count + '0%';
    }

    
</script>