画像をローラーで拡大縮小
9976 ワード
画像をローラーで拡大縮小
"java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
"c" uri="http://java.sun.com/jsp/jstl/core"%>
"fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
head>
<style type="text/css">
body{font-size: 12px;font-family: "Verdana" , "Arial" , "Helvetica" , "sans-serif";}
button{
background-color: #ccc;
color:black;
width:100px;
height: 30px;
border-radius: 5px;
}
#block1 { position:absolute;}
#div2 {width:100%; height:100%; background:white; position:absolute;overflow: hidden;}
style>
<body>
<div id="main">
<div id="div2">
<div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;
left: 0px; position: absolute; top: 0px; " onMouseOut=""drag="0">
<div id='lm_test' style="zoom: 1.5;z-index: 100000;width: 100%;height: 100%" >
<img src="static/img/userContrail/buildground.png" border="0" name="images1">
div>
div>
div>
div>
<script type="text/javascript">
drag = 0
move = 0
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
var oDiv=document.getElementById('block1');
var oDiv2=document.getElementById('div2');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l>0)
{
l=0;
}
else if(lif (t>0)
{
t=0;
}
else if(t'px' ;
oDiv.style.top=t+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
//
document.getElementById("lm_test").onmousewheel=function(){
return onWheelZoom(this);
}
function onWheelZoom(obj){
zoom = parseFloat(obj.style.zoom);
tZoom = zoom + (event.wheelDelta>0 ? 0.05 : -0.05);
if(tZoom<0.5) return true;
obj.style.zoom=tZoom;
return false;
}
script>
body>
html>