4.页面查看图片时控制图片的旋转放大和缩放(修订版)
Posted 龙宇在天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4.页面查看图片时控制图片的旋转放大和缩放(修订版)相关的知识，希望对你有一定的参考价值。
1.该功能需要引入的js
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/[email protected])}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>
以上是关于4.页面查看图片时控制图片的旋转放大和缩放(修订版)的主要内容，如果未能解决你的问题，请参考以下文章