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

最新推荐文章于 2023-11-25 21:01:13 发布

原创最新推荐文章于 2023-11-25 21:01:13 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#图片 #放大缩小

代码总结专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现图片通过鼠标滚轮进行缩放的方法。该方法利用了事件监听器和样式的zoom属性来完成图片的放大和缩小功能，并通过设置绝对定位来确保图片在缩放过程中的位置准确性。

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

<%@ 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>