1.页面查看图片时控制图片的旋转、放大和缩放
1.查看图片（始终垂直居中）
1 //查看图片 2 $(document).on('click','#ckgzs',function(){ 3 var id=$("#fhzx_lsh").val(); 4 $.ajax({ 5 type:'post', 6 url:basePath+'common_getGzsZm.do', 7 data:{lsh:id}, 8 dataType:'text', 9 success:function(data){ 10 var window_h=$(window).height(); 11 if(data=='1'){ 12 parent.layer.open({ 13 type: 1, 14 title: false,//不显示标题 15 // title: ['xxx', 'font-size:18px;'], 16 skin: 'layui-layer-rim', //加上边框 17 area: ['99%', '99%'], //宽高 18 // anim: 4, //动画类型 19 content: '<div style="text-align: center;width:100%;height:'+window_h+'px;overflow-y:auto;"><img src=\"common_gzsZs.do?lsh='+id+'&t=' + Math.random()+'\" style="max-width:100%;max-height:'+window_h+'px;position: absolute;top: 50%;left:50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);" id="currentImg"/><div style="position:absolute;bottom:20px;left:50%;margin-left:-66px;"><img title="左转90度" src="images/btn_turnleft.png" onclick="tranImg(-90)"> <img title="右转90度" src="images/btn_turnright.png" onclick="tranImg(90)"> <img title="放大" src="images/btn_zoomin.png" onclick="fangda_img(\'fd\')"> <img title="缩小" src="images/btn_zoomout.png" onclick="fangda_img(\'sx\')"></div></div>' 20 // content: '<div style="text-align: center;width:100%;height:100%;overflow-y:auto;"><img src=\"common_gzsZs.do?lsh='+id+'&t=' + Math.random()+'\" style="max-width:100%;" id="currentImg"/><div style="position:absolute;bottom:20px;left:50%;margin-left:-32px;"><img src="images/btn_turnleft.png" onclick="tranImg(-90)"> <img src="images/btn_turnright.png" onclick="tranImg(90)"><img src="images/btn_turnright.png" onclick="fangda_img(\'fd\')"></div></div>' 21 }); 22 }else{ 23 parent.swal("无证明文件！"); 24 return; 25 } 26 } 27 }); 28 });
2.控制图片旋转
//控制图片旋转 var current = 0;//当前图片的角度 function tranImg(trun){ //通过id获取目标图片节点 var imgObj=window.parent.document.getElementById('currentImg'); if(!imgObj){ imgObj=window.parent.parent.document.getElementById('currentImg'); if(!imgObj){ imgObj=document.getElementById('currentImg'); } } current = (current+trun)%360; if(current==90||current==-90||current==270||current==-270){ var window_h=$(window).height(); $("#currentImg").css("max-width",window_h); imgObj.style.transform = 'translate(-50%,-50%) rotate('+current+'deg)'; }else{ $("#currentImg").css("max-width","100%"); imgObj.style.transform = 'translate(-50%,-50%) rotate('+current+'deg)'; } // imgObj.style.transform = 'rotate('+current+'deg)'; }
3.控制图片放大和缩小
function fangda_img(fdorsx){ if (ForX=="fd") { $("#currentImg").width($("#currentImg").width()*1.1); $("#currentImg").height($("#currentImg").height()*1.1); }else if(ForX=="sx"){ $("#currentImg").width($("#currentImg").width()/1.1); $("#currentImg").height($("#currentImg").height()/1.1); } }
4.参考文献（页面源码，具体来源已不可考证）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script> var current = 0; function tranImg(trun){ var imgObj= document.getElementById('imgTest'); current = (current+trun)%360; imgObj.style.transform = 'rotate('+current+'deg)'; } </script> </head> <body> <img id ="imgTest" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487259339574&di=ea8937bacd8f0e7bbb91f9bceb27e612&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F1e30e924b899a90146287f671f950a7b0208f545.jpg" target="_blank" class="baidu-highlight"> <input type="button" id="leftTran" onclick="tranImg(-90)" value="左"> <input type="button" id="rightTran" onclick="tranImg(90)" value="右"> </body> </html>
5.按钮附录（这些图片复制到QQ聊天窗口中就可以使用了）
