<style>
|
#opr_big_img_wrap{
|
height: 600px;
|
overflow-y: auto;
|
margin-left: 12px;
|
margin-right: 12px;
|
}
|
#opr_big_img{
|
display: block;
|
width: 90%;
|
margin: 0 auto;
|
height: auto;
|
-moz-user-select: none; /*火狐*/
|
-webkit-user-select: none; /*webkit浏览器*/
|
-ms-user-select: none; /*IE10*/
|
-khtml-user-select: none; /*早期浏览器*/
|
user-select: none;
|
}
|
.prev_img_icon_wrap{
|
position: absolute;
|
left: 30px;
|
top: 285px;
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
background:rgba(0,0,0,1);
|
opacity:0.2636;
|
cursor: pointer;
|
z-index: 99999;
|
}
|
.next_img_icon_wrap{
|
position: absolute;
|
right: 30px;
|
top: 285px;
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
background:rgba(0,0,0,1);
|
opacity:0.2636;
|
cursor: pointer;
|
z-index: 99999;
|
}
|
.prev_img_icon{
|
color: #fff;
|
font-size: 21px;
|
position: relative;
|
left: 6px;
|
top: 3px;
|
}
|
.next_img_icon{
|
color: #fff;
|
font-size: 21px;
|
position: relative;
|
left: 6px;
|
top: 3px;
|
}
|
#thumbnail_nav_list{
|
overflow-x: auto;
|
white-space : nowrap;
|
padding: 10px 20px;
|
position: relative;
|
}
|
.thumbnail_nav_img{
|
display: inline-block;
|
width:60px;
|
height:40px;
|
margin-right: 4px;
|
cursor: pointer;
|
}
|
.current_img{
|
border-radius:4px;
|
border:2px solid rgba(0,129,240,1);
|
}
|
#banner_img_file_name{
|
line-height: 30px;
|
font-size:14px;
|
color:rgba(51,51,51,1);
|
text-align: center;
|
}
|
.img_opr_btn_wrap{
|
padding: 20px;
|
text-align: center;
|
}
|
</style>
|
<div style="position: relative;">
|
<span class="prev_img_icon_wrap">
|
<i class="layui-icon prev_img_icon"></i>
|
</span>
|
<span class="next_img_icon_wrap">
|
<i class="layui-icon next_img_icon"></i>
|
</span>
|
<div id="opr_big_img_wrap">
|
<img id="opr_big_img">
|
</div>
|
</div>
|
<div id="banner_img_file_name"></div>
|
<div id="thumbnail_nav_list">
|
|
</div>
|
<div class="img_opr_btn_wrap">
|
<img src="image/img_left_rotation.png" id="opr_img_left_rotation" class="operation_img_btn_img" title="左旋转">
|
<img src="image/img_right_rotation.png" id="opr_img_right_rotation" class="operation_img_btn_img" title="右旋转">
|
<img src="image/img_enlarge.png" id="opr_img_enlarge" class="operation_img_btn_img" title="放大">
|
<img src="image/img_narrow.png" id="opr_img_narrow" class="operation_img_btn_img" title="缩小">
|
</div>
|
|
<script>
|
var _left_offset = 0;
|
layui.use('tree', function(){
|
// 获取图片预览信息
|
var index = layer.load(0,{time:50*1000});
|
$.ajax({
|
type: 'POST',
|
url: base_url+"/rlc-cts/server/queryEcmPageList",
|
dataType: 'json',
|
contentType: "application/json",
|
data:JSON.stringify({
|
"businessno": window.images_preview_businessno,
|
"ispicture": "1",
|
"objecttype": window.images_preview_objecttype,
|
"typeno": window.images_preview_typeno,
|
"serialno":window.images_preview_serialno?window.images_preview_serialno:""
|
}),
|
success: function (res) {
|
if(res.code == "00"){
|
$("#thumbnail_nav_list").html(template("thumbnail_nav_list_tpl",res));
|
$.each(res.result,function (i,n) {
|
if(n.firstFile == 1){
|
$("#opr_big_img").attr("src",n.url);
|
$("#banner_img_file_name").text(n.fileName);
|
return;
|
}
|
});
|
if($(".current_img").index(".thumbnail_nav_img")>0){
|
var _idx = $(".current_img").index(".thumbnail_nav_img");
|
_left_offset = _idx*68;
|
$("#thumbnail_nav_list").scrollLeft(_left_offset);
|
}
|
}else{
|
layer.msg(res.msg);
|
}
|
layer.close(index);
|
}
|
});
|
// 左旋转
|
var img_rotation_degree = 0,img_scale_degree = 1;
|
$("#opr_img_left_rotation").click(function () {
|
img_rotation_degree -= 90;
|
$("#opr_big_img").css('transform', 'rotate('+img_rotation_degree+'deg)');
|
});
|
|
// 右旋转
|
$("#opr_img_right_rotation").click(function () {
|
img_rotation_degree += 90;
|
$("#opr_big_img").css('transform', 'rotate('+img_rotation_degree+'deg)');
|
});
|
|
// 图片放大
|
$("#opr_img_enlarge").click(function () {
|
img_scale_degree += 0.05;
|
$("#opr_big_img").css('transform','scale('+img_scale_degree+','+img_scale_degree+')');
|
});
|
|
// 图片缩小
|
$("#opr_img_narrow").click(function () {
|
img_scale_degree -= 0.05;
|
$("#opr_big_img").css('transform','scale('+img_scale_degree+','+img_scale_degree+')');
|
});
|
|
// 滚轮放大缩小处理
|
$("#opr_big_img").on('mousewheel', function(e){
|
var deltaY = e.originalEvent.deltaY
|
if(deltaY > 0){
|
img_scale_degree -= 0.05;
|
$("#opr_big_img").css('transform', 'scale(' + img_scale_degree + ',' + img_scale_degree + ')');
|
}else{
|
img_scale_degree += 0.05;
|
$("#opr_big_img").css('transform', 'scale(' + img_scale_degree + ',' + img_scale_degree + ')');
|
}
|
})
|
|
// 前一张图片
|
$(".prev_img_icon_wrap").click(function () {
|
$(".next_img_icon_wrap").show();
|
if($(".current_img").index(".thumbnail_nav_img")>0){
|
$(this).show();
|
$("#opr_big_img").attr("src",$(".current_img").prev(".thumbnail_nav_img").attr("src"));
|
$("#banner_img_file_name").text($(".current_img").prev(".thumbnail_nav_img").attr("data-filename"));
|
$(".current_img").removeClass("current_img").prev(".thumbnail_nav_img").addClass("current_img");
|
console.log("位置",_left_offset);
|
_left_offset = _left_offset*1 - 68;
|
$("#thumbnail_nav_list").scrollLeft(_left_offset);
|
}else{
|
$(this).hide();
|
}
|
});
|
// 后一张图片
|
$(".next_img_icon_wrap").click(function () {
|
$(".prev_img_icon_wrap").show();
|
if($(".current_img").index(".thumbnail_nav_img")<($(".thumbnail_nav_img").length - 1)){
|
$(this).show();
|
$("#opr_big_img").attr("src",$(".current_img").next(".thumbnail_nav_img").attr("src"));
|
$("#banner_img_file_name").text($(".current_img").next(".thumbnail_nav_img").attr("data-filename"));
|
$(".current_img").removeClass("current_img").next(".thumbnail_nav_img").addClass("current_img");
|
console.log("位置",_left_offset);
|
_left_offset = _left_offset*1 + 68;
|
$("#thumbnail_nav_list").scrollLeft(_left_offset);
|
}else{
|
$(this).hide();
|
}
|
});
|
|
|
$("body").on('click', '.thumbnail_nav_img', function () {
|
$(".thumbnail_nav_img").removeClass("current_img");
|
$(this).addClass("current_img");
|
$("#opr_big_img").attr("src",$(".current_img").attr("src"));
|
$("#banner_img_file_name").text($(".current_img").attr("data-filename"));
|
_left_offset = ($(".current_img").prevAll(".thumbnail_nav_img").length-1)*68+20;
|
});
|
|
});
|
</script>
|
|
<script type="text/html" id="thumbnail_nav_list_tpl">
|
{{each result value index}}
|
<img class="thumbnail_nav_img {{if value.firstFile == 1}}current_img{{/if}}" data-filename="{{value.fileName}}" src="{{value.url}}">
|
{{/each}}
|
</script>
|
