实现图片通过滚轮的放大缩小

实现图片通过滚轮的放大缩小

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="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>

你可能感兴趣的:(代码总结)