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聊天窗口中就可以使用了）
