码迷,mamicode.com
首页 > 其他好文 > 详细

4.页面查看图片时控制图片的旋转、放大和缩放(修订版)

时间:2017-10-17 15:44:21      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:ase   import   lang   enc   content   mat   scheme   控制   功能   

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/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\‘)">&nbsp;<img title="右转90度" src="image/btn_turnright.png" onclick="tranImg(90,\‘currentImg\‘)">&nbsp;<img title="放大" src="image/btn_zoomin.png" onclick="bigORsamll_img(\‘big\‘,\‘currentImg\‘)">&nbsp;<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.页面查看图片时控制图片的旋转、放大和缩放(修订版)

标签:ase   import   lang   enc   content   mat   scheme   控制   功能   

原文地址:http://www.cnblogs.com/zheaven/p/7681022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!