关闭

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

190人阅读 评论(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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:191次
    • 积分:12
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档