js实现图片滚轮放大缩小以及鼠标拖动

原创 2015年07月08日 14:16:13

主要功能:实现点击小图查看大图。
首先打开一个界面

window.showModalDialog("<%=thisPath%>/jsp/showPic.jsp",dir,"dialogHeight:" + screen.height+ ";dialogWidth:" + screen.width+ ";help:no;status:no");

将图片链接导入到页面中

<%@ page language="java" contentType="text/html;charset=GBK"%>

<html>

<head>
  <title>图片详情</title>
  <meta http-equiv="Expires" CONTENT="0">
  <meta http-equiv="Cache-Control" CONTENT="no-cache">
  <meta http-equiv="Pragma" CONTENT="no-cache">
</head>

<body>

<div Style="position:relative" ID="imgDiv">
    <script>
        var dir = window.dialogArguments;
        document.write("<img src='"+dir+"' id='img2'  align=middle Style='CONTAINER:positioned;position:absolute;'   onmousewheel='return bigimg(this)' onmouseup = clear2() onMouseMove=imgMove()></span><br>");
    </script>
 </div>


</body>
<script language="javascript">
function bigimg(i)
{
    var zoom = parseInt(i.style.zoom,10)||100;
    zoom += event.wheelDelta / 12;
    if(zoom > 0 )
    i.style.zoom=zoom+'%';
    return false;
}

var temp = 0;
var temp_y = 0;

function imgMove()
{
 //if the left button was not pressed,return
 if(window.event.button!= 1) 
 {
    return 0;
 }
 //get the new position
 with(window.event.srcElement.style)
 {
     /* x1:鼠标坐标x   y1 :鼠标坐标y1 */
     var x1 = window.event.x;               
     var y1 = window.event.y;
     /* 图像位置 */
     var x2 = document.all.img2.offsetLeft;
     var y2 = document.all.img2.offsetTop;

     if(temp!= 0 & temp_y!=0){
         pixelLeft = window.event.x-temp;
         pixelTop = window.event.y-temp_y;
     }else{

         /* 计算鼠标点距离图像左上角点的位置 */
         temp =x1-x2;
         temp_y = y1-y2;
     }

 }
 window.event.returnValue=false;
}

/* 当鼠标弹起后,将变量置为空 */
function clear2(){
    temp = 0;
    temp_y = 0;
}
</script>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Jquery鼠标滚轮放大缩小图片

使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片。 鼠标滚轮放大图片 img{ border:2px solid #...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

使用hammer.js如何做到图片在拖动及放大拖动时图片的边界不在视图之内

使用hammer.js如何做到图片在拖动及放大拖动时图片的边界不在视图之内

JS控制图片拖动 放大 缩小 旋转

// 缩放图片 function imgToSize(oBool) { var oImg = document.all('oImg'); oImg.style.zoom = ...
  • atco
  • atco
  • 2011年12月21日 16:26
  • 7267

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js实现鼠标滚轮滚动以当前鼠标焦点为中心缩放

var posMoniCtx;//画笔 var posMoniCanvas;//画布var imgX=0,imgY=0,imgScale=1,minScale=1,maxScale=8, de...

js滚轮控制图片的放大缩小

1、添加一张图片 id="chgImg" src="1.jpg" width="760" onmousewheel="return bigimg(this)" style="cursor:point...

jQuery图片缩放拖拽插件 imageQ

综合网上一些代码 自己写的一个小插件
  • keyunq
  • keyunq
  • 2011年01月21日 16:09
  • 4727

js实现鼠标滚轮控制图片缩放效果的方法(转)

作者:代码家园 字体:[增加 减小] 类型:转载 时间:2015-02-20 这篇文章主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascri...
  • dragoo1
  • dragoo1
  • 2016年07月19日 11:09
  • 1265

jquery 鼠标滚轮实现图片缩放

无标题文档 $(function(){ function zoomImg(o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现图片滚轮放大缩小以及鼠标拖动
举报原因:
原因补充:

(最多只允许输入30个字)