片时控制图片的旋转、放大和缩放(修订版)"/>
4.页面查看图片时控制图片的旋转、放大和缩放(修订版)
1.该功能需要引入的js
- jquery.min.js--/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation*/
- layer.js--/*! layer-v3.0.1 Web弹层组件 MIT License / 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"));//记录鼠标点击的初始xY1 = event.y - parseInt($("#"+img_id).css("margin-top"));//记录鼠标点击的初始ystore.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',//自定义idtitle: 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" οnclick="tranImg(-90,\'currentImg\')"> <img title="右转90度" src="image/btn_turnright.png" οnclick="tranImg(90,\'currentImg\')"> <img title="放大" src="image/btn_zoomin.png" οnclick="bigORsamll_img(\'big\',\'currentImg\')"> <img title="缩小" src="image/btn_zoomout.png" οnclick="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聊天窗口中就可以使用了）
转载于:.html
更多推荐
4.页面查看图片时控制图片的旋转、放大和缩放(修订版)
发布评论