4.页面查看图片时控制图片的旋转、放大和缩放(修订版)
1.该功能需要引入的js
- jquery.min.js--/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation*/
- layer.js--/*! layer-v3.0.1 Web弹层组件 MIT License http://layer.layui.com/ By 贤心 */
- yyl-photo-look.js
/**yyl-photo-look.js**/ function photo_yyl_look(img_id){ var X1; var Y1; var img_w=$("#"+img_id).width(); var img_h=$("#"+img_id).height(); $("#"+img_id).css({"margin-left":-img_w/2,"margin-top":-img_h/2}); function mouse_down(event){ grab.className = "grabbing"; if(store.drag){ X1 = event.x - parseInt($("#"+img_id).css("margin-left"));//记录鼠标点击的初始x Y1 = event.y - parseInt($("#"+img_id).css("margin-top"));//记录鼠标点击的初始y store.move = true; } if (event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } function mouse_move(event){ if (store.move == true){ if (store.move){ $("#"+img_id).css("margin-left",(event.x - X1)); $("#"+img_id).css("margin-top",(event.y - Y1)); } } if (event.preventDefault){ event.preventDefault(); } else{ event.returnValue=false; } } function mouse_up(event){ grab.className = "grab"; store.move = false; if (event.preventDefault){ event.preventDefault(); } else{ event.returnValue=false; } } if (window.addEventListener) { var grab = document.querySelector("#"+img_id); var store = { move: false,drag:true}; grab.addEventListener("mousedown", function (event) { mouse_down(event); }); document.addEventListener("mousemove", function(event) { mouse_move(event); }); document.addEventListener("mouseup", function(event) { mouse_up(event); }); grab.addEventListener("mousewheel", function(event) { if((event.wheelDelta)>0){ bigORsamll_img("big",img_id); }else if((event.wheelDelta)<0){ bigORsamll_img("small",img_id); } }); grab.addEventListener("DOMMouseScroll", function(event) {//兼容火狐的鼠标滚动的 if(event.detail==-3){//等于-3是向上滚动 bigORsamll_img("big",img_id); }else if(event.detail==3){ bigORsamll_img("small",img_id); } }); }else if(window.attachEvent){ var grab = document.querySelector("#"+img_id); var store = { move: false,drag:true}; grab.attachEvent("onmousedown", function (event) { mouse_down(event); }); document.attachEvent("onmousemove", function(event) { mouse_move(event); }); document.attachEvent("onmouseup", function(event) { mouse_up(event); }); grab.attachEvent("onmousewheel", function(event) { if(event.wheelDelta>0){ bigORsamll_img("big",img_id); }else{ bigORsamll_img("small",img_id); } }); } } //旋转和放大 var current=0;//初始角度 var deg_num=0; function tranImg(trun,id){ var img=$("#"+id); current = (current+trun)%360; if(current==-0||current==0){ deg_num=4; }else if(current==-90||current==270){ deg_num=3; }else if(current==-180||current==180){ deg_num=2; }else if(current==-270||current==90){ deg_num=1; } img.css("filter",'progid:DXImageTransform.Microsoft.BasicImage(rotation:'+deg_num+')');//兼容ie的 img.css("transform",'translate(-50%,-50%) rotate('+current+'deg)'); } //放大和缩小 function bigORsamll_img(bigORsamll,id){ var percent_dafault=100;//图片开始的大小比例 if(percent_dafault==10&&bigORsamll=="small"){ return false; }else if(percent_dafault==300&&bigORsamll=="big"){ return false; } if (bigORsamll=="big") { $("#"+id).width($("#"+id).width()*1.1); $("#"+id).height($("#"+id).height()*1.1); percent_dafault+=10; }else if(bigORsamll=="small"){ $("#"+id).width($("#"+id).width()/1.1); $("#"+id).height($("#"+id).height()/1.1); percent_dafault-=10; } }
2..jsp页面源码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> /*图片平移的抓手样式*/ .grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .grabbing { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } </style> </head> <body> jsp页面上图片查看时的左右旋转与放大缩小 <br> <button id="check">查看图片</button> <script src="${basePath}js/jquery.min.js"></script> <script src="${basePath}js/layer/layer.js"></script> <script src="${basePath}js/yyl-photo-look.js"></script> <script type="text/javascript"> var basePath='${basePath}'; $("#check").click(function(){ var window_h=$(window).height(); parent.layer.open({ type: 1, id:'img-yyl-container',//自定义id title: false,//不显示标题 skin: 'layui-layer-rim', //加上边框 area: ['99%', '99%'], //宽高 content: '<div style="text-align: center;width:100%;height:'+window_h+'px;overflow:hidden;"><img class="grab" src=\"image/E@RKDZS6V5DNCS)}N52Y}]9.jpg?t='+Math.random()+'\" style="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="image/btn_turnleft.png" onclick="tranImg(-90,\'currentImg\')"> <img title="右转90度" src="image/btn_turnright.png" onclick="tranImg(90,\'currentImg\')"> <img title="放大" src="image/btn_zoomin.png" onclick="bigORsamll_img(\'big\',\'currentImg\')"> <img title="缩小" src="image/btn_zoomout.png" onclick="bigORsamll_img(\'small\',\'currentImg\')"></div></div><script>photo_yyl_look("currentImg");$("#img-yyl-container").css("overflow","hidden");<\/script>' }); }); </script> </body> </html>
注：
在引入图片时路径后面要添加一个动态变化的数字参数Math.random()，否则会因为浏览器缓存的原因使得图片的初始位置还是最后一次操作的位置。
eg: src=\"image/E@RKDZS6V5DNCS)}N52Y}]9.jpg?t='+Math.random()+'\"
3.按钮附录（这些图片复制到QQ聊天窗口中就可以使用了）
