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

最新推荐文章于 2024-06-25 13:13:22 发布

旭哥在线

最新推荐文章于 2024-06-25 13:13:22 发布

阅读量7.3k

点赞数 1

分类专栏： html查看图片

本文链接：https://blog.csdn.net/king7136813/article/details/46802871

版权

html查看图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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>

旭哥在线

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现图片滚轮放大缩小以及鼠标拖动

主要功能：实现点击小图查看大图。首先打开一个界面window.showModalDialog("<%=thisPath%>/jsp/showPic.jsp",dir,"dialogHeight:" + screen.height+ ";dialogWidth:" + screen.width+ ";help:no;status:no");将图片链接导入到页面中<%@ page language=
复制链接

扫一扫