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

最新推荐文章于 2024-09-14 15:19:55 发布

LinRuoZhuo

最新推荐文章于 2024-09-14 15:19:55 发布

阅读量3.6k

点赞数

分类专栏：代码总结文章标签：图片放大缩小

本文链接：https://blog.csdn.net/LinRuoZhuo/article/details/77162561

版权

代码总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

<%@ 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+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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(l<oDiv2.offsetWidth-oDiv.offsetWidth)
      {
        l=oDiv2.offsetWidth-oDiv.offsetWidth;
      }

      if(t>0)
      {
        t=0;
      }
      else if(t<oDiv2.offsetHeight-oDiv.offsetHeight)
      {
        t=oDiv2.offsetHeight-oDiv.offsetHeight;
      }

      oDiv.style.left=l+'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>