弹窗的图片鼠标滑动可以放大和缩小
作者：互联网
<%@ 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" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>互动问答</title>
<link rel="stylesheet" href="/kms/faq/css/faq-index.css" type="text/css">
<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>
</head>
<style type="text/css">
.content-wrap{
line-height: 21px;
}
</style>
<body>
<div class="wrap">
<div class="hd">
<img src="/kms/faq/images/faq-avatar.png" alt="">
<span>客服</span>
</div>
<!-- 主体 -->
<div class="content">
<div class="left">
<!-- 聊天内容 -->
<div class="interflow">
<c:forEach items="${history}" var="h" varStatus="vs">
<!-- 结束时间 -->
<div class="message-item time">
<div class="time-box">
${h.answerTime}
</div>
</div>
<!-- 用户发送 -->
<div class="message-item user-enquire">
<img src="/kms/imgs/user.gif">
<div class="content-info">
<div class="nameWrap">${h.customerName}</div>
<div class="content-wrap">${h.problem}</div>
</div>
</div>
<!-- 客户回复 -->
<div class="message-item customer-service">
<img src="/kms/faq/images/kefu-avatar.png" alt="">
<div class="content-info">
<div class="nameWrap">客服中心</div>
<div class="content-wrap">${h.answer}</div>
</div>
</div>
</c:forEach>
<c:if test="${history!=null}">
<!-- 结束时间 -->
<div class="message-item exchange">
<div class="exchange-time">
<%--22:29--%>
<div class="tipsBox">上次聊到这里</div>
</div>
</div>
</c:if>
<!-- 默认列表 -->
<div id="acqlist" class="message-item relevant">
<img src="/kms/faq/images/kefu-avatar.png" alt="">
<div class="content-info">
<div class="relevant-hd">
<div class="hd-left">
<!-- <span>?</span> -->
<img src="/kms/faq/images/problem.png" alt="">
<span>猜你想问</span>
</div>
<%--<div class="hd-right">
<img src="/kms/faq/images/refresh.png" alt="">
<span>换一换</span>
</div>--%>
</div>
<!-- 问题列表 -->
<ul class="relevant-bd">
<c:forEach end="4" items="${hot}" var="h">
<li>
<div class="ellipsis">${h.title}</div>
<img src="/kms/faq/images/right-icon.png" alt="">
</li>
</c:forEach>
</ul>
</div>
</div>
</div>
<!-- 问答分类 -->
<div class="guess-item">
<span id="c100">猜你想问</span>
<c:forEach items="${Category}" var="c" varStatus="vc">
<c:choose>
<c:when test="${vc.index>5}">
<span class="display" id="${c.id}">${c.categoryName}</span>
</c:when>
<c:otherwise>
<span id="${c.id}">${c.categoryName}</span>
</c:otherwise>
</c:choose>
</c:forEach>
<img src="/kms/faq/images/right-icon.png" alt="" onclick="setdisplay()">
<%--<div class="guess-checkbox">
是否公开：<input type="checkbox" id="isopen" checked>
</div>--%>
</div>
<!-- 消息输入 -->
<div class="message-input">
<textarea placeholder="请输入内容" class="textarea" rows="5" cols="20"></textarea>
<div class="send-btn">
<div>发送</div>
</div>
<!-- 推荐 -->
<ul class="recom">
</ul>
</div>
</div>
<div class="right">
<!-- 头部 -->
<div class="right-hd">
<div class="right-hd-item">相关回答</div>
<div class="currentAnswer right-hd-item">热点回答</div>
</div>
<!-- 内容 -->
<div class="right-bd">
<!-- 这是相关回答 -->
<div class="item">
<c:forEach var="r" items="${relevant}">
<div>${r.title}</div>
</c:forEach>
</div>
<!-- 这是热点回答 -->
<div class="item" style="display: block;">
<c:forEach var="h" items="${hot}">
<div>${h.title}</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
</body>
<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, "<span>"+result+"</span>");
var recomHTML =
"<li>"+
"<div class='ellipsis'>" +
newHtml
+ "</div>"+
"</li>";
$(".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 += "<li>\n" +
" <div class=\"ellipsis\">" + item.title + "</div>\n" +
" <img src=\"/kms/faq/images/right-icon.png\">\n" +
"</li>";
}
});
if (html ===''){
html += "<li>\n" +
" <div class=\"none\">暂时没有此类型的问答</div>\n" +
"</li>";
}
$(".relevant-bd").empty();
$(".relevant-bd").append(html);
var html=$("#acqlist").prop("outerHTML");
$("#acqlist").remove();
$('.interflow').append(html);
getScroll();
}
)
})
});
// 客户消息回复模板
var customerHtml =
"<div class=\"message-item customer-service\">\n" +
" <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <div class=\"nameWrap\">客服中心</div>\n" +
" <div class=\"content-wrap\">没有找到相关问题或答案，您可以<a href='/ServiceAction/com.velcro.workflow.workflow.servlet.WfViewAction?pipeid=2c923dae75d5c7a70175d6194c5a0049&targeturl=' target='_blank'>点击这里</a>前往问答流程提问 </div>\n" +
" </div>\n" +
"</div>";
// 在父元素中末尾处添加
// $('.interflow').append(customerHtml)
// 相关回答与相关回答的点击事件
$('.right-bd .item').children().on('click', function () {
// 用户的模板字符串
var usrHtml =
"<div class=\"message-item user-enquire\">" +
" <img src=\"/kms/imgs/user.gif\" >" +
" <div class=\"content-info\">" +
" <!--<div class=\"nameWrap\">用户</div>-->" +
" <div class=\"content-wrap\">" + $(this)[0].innerText + "</div>" +
" </div>" +
"</div>";
$('.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 =
"<div class=\"message-item customer-service\">\n" +
" <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <div class=\"nameWrap\">客服中心</div>\n" +
" <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
" </div>\n" +
"</div>";
$('.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 =
"<div class=\"message-item user-enquire\">\n" +
" <img src=\"/kms/imgs/user.gif\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <!--<div class=\"nameWrap\">用户</div>-->\n" +
" <div class=\"content-wrap\">" + $(this)[0].innerText + "</div>\n" +
" </div>\n" +
"</div>";
$('.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 =
"<div class=\"message-item customer-service\">\n" +
" <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <div class=\"nameWrap\">客服中心</div>\n" +
" <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
" </div>\n" +
"</div>";
//图片点击事件
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 =
"<div class=\"message-item user-enquire\">\n" +
" <img src=\"/kms/imgs/user.gif\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <!--<div class=\"nameWrap\">用户</div>-->\n" +
" <div class=\"content-wrap\">" + $('.textarea').val() + "</div>\n" +
" </div>\n" +
"</div>";
// 在父元素中末尾处添加
$('.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 =
"<div class=\"message-item customer-service\">\n" +
" <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
" <div class=\"content-info\">\n" +
" <div class=\"nameWrap\">客服中心</div>\n" +
" <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
" </div>\n" +
"</div>";
//图片点击事件
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 = $('<div style="position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 999999999;top: 0;left: 0;"><img style="position: absolute;height: 500px;left: 40%;top: 150px;" src="'+ imgUrl +'" /></div>')
// 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 = $('<div style="position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 999999999;top: 0;left: 0;"><img style="height: 500px;display: block;margin: 0 auto;margin-top: 50px;" src="'+ imgUrl +'" /></div>')
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 = $('<div style="position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 999999999;top: 0;left: 0;"><img style="height: 500px;display: block;margin: 0 auto;margin-top: 50px;" src="'+ imgUrl +'" /></div>')
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>
</html>
标签：function,鼠标,isopen,question,append,var,滑动,data,弹窗 来源： https://www.cnblogs.com/jk200/p/16355558.html