用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，鼠标滚轮事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，鼠标滚轮事件相关的知识，希望对你有一定的参考价值。

用html和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，说白了就是做一个像百度地图一样，鼠标放上去就一鼠标为相对坐标，滚动鼠标滚轮就可以缩放图片的模块。可以使用以下代码：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.tup
width:800px;
height:500px;
margin:100px auto;
border:3px;
background:red;
overflow:hidden;
zoom:300px;



</style>
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
//图片按比例缩放,可输入参数设定初始大小
function resizeimg(ImgD,iwidth,iheight)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
if(image.width/image.height>= iwidth/iheight)
if(image.width>iwidth)
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
else
ImgD.width=image.width;
ImgD.height=image.height;

ImgD.alt=image.width+"×"+image.height;

else
if(image.height>iheight)
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
else
ImgD.width=image.width;
ImgD.height=image.height;

ImgD.alt=image.width+"×"+image.height;

　　　　ImgD.style.cursor= "pointer"; //改变鼠标指针
　ImgD.onmousewheel = function img_zoom() //滚轮缩放
　　　　　
　　　　　　　　　　var zoom = parseInt(this.style.zoom, 0) || 100;
　　　　　　　　　　zoom += event.wheelDelta / 12;
　　　　　　　　　　if (zoom> 0)　this.style.zoom = zoom + "%";
　　　　　　　　　　return false;
　　　　　
　　


</SCRIPT>
</head>

<body>

<div class="tup">
<img name="" src="1.jpg" onload="javascript:resizeimg(this,198,235)">
<div>
<div id="allmap"></div>
</body>
</html>
现在这里是以浏览器左上角为参照点缩放的，我需要它以鼠标为参照点进行缩放

<style>
*margin: 0;padding: 0;
bodybackground: #333;
#boxposition: relative;overflow: hidden;margin: 50px auto;border: 1px solid #fff;background: #fff;
#box imgposition: absolute;
    </style>
    <div id="box" style="width: 500px;height: 500px;">
        <img src="你的图片地址" style="width:827px; height:262px;" alt="">
    </div>
    <script>
        ;(function() 
        var d =document,on = function(b,o)
            for(var a in o)
                b["on"+a] = o[a];
            
        ;

        var isRun,
            startX,
            startY,
            endX,
            endY,
            rX,
            rY,
            bgX=0,
            bgY=0,
            $b = d.getElementById("box");
            ww =parseInt($b.style.width),
            wh =parseInt($b.style.height),
            i = $b.getElementsByTagName('img')[0],
            img = i.style,
            imgw = parseInt(img.width),
            imgh = parseInt(img.height),
            scaleSize = 1;
function rs()
    var w,h;
            //以完全显示图片为基准,如果改为>，则为以铺满屏幕为基准
            if(ww/wh < imgw/imgh)
                w = ww;
                h = imgh*ww/imgw;
                bgX=0;
                bgY=-(h-wh)/2;
                scaleSize = ww/imgw;//初始比率
            else
                w = imgw*wh/imgh;
                h = wh;
                bgX = -(w-ww)/2;
                bgY=0;
                scaleSize = wh/imgh;
            
            img.width = w+"px";
                img.height = h+"px";
                img.left = bgX+"px";
                img.top = bgY+"px";

rs();
    /* Init */
    on(d,
    "mousedown": function(e)
            //按中建快速还原大小
            if(e.which===2)
                rs();
            
            if(e.which===1 && e.target && (e.target === i))
                isRun = true;
                startX = e.pageX;
                startY = e.pageY;
                return false;
            
        ,
        "mouseup": function(e)
            if(e.which!==1)
                    return;
                
            img.cursor = "default";
            isRun = false;
            bgX = rX;
            bgY = rY;
            return false;
        ,
        "mousemove": function(e)
            if(e.which!==1)
                    return;
                
            if(isRun)
                img.cursor = "move";
                endX = e.pageX;
                endY = e.pageY;
                rX = bgX+endX-startX;
                rY = bgY+endY-startY;

                img.left = rX+"px";
                img.top = rY+"px";
                    
        ,
        "mousewheel":function(e)
            //以鼠标为中心缩放，同时进行位置调整
        var deltaY = 0;
        var x = e.pageX;
        var y = e.pageY;
        e.preventDefault();

        if(e.target && (e.target === i))
        x = x-$b.offsetLeft;
        y = y-$b.offsetTop;

        var p = -(e.deltaY)/1000;
        var ns=scaleSize;
        ns += p;
        ns = ns<0.1 ? 0.1 :(ns > 5 ? 5 : ns);//可以缩小到0.1,放大到5倍

        //计算位置，以鼠标所在位置为中心
        //以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
        bgX = bgX-(x-bgX)*(ns-scaleSize)/(scaleSize);
        bgY = bgY-(y-bgY)*(ns-scaleSize)/(scaleSize);
        scaleSize = ns;//更新倍率

        img.width = imgw*ns+"px";
        img.height = imgh*ns+"px";
        img.top = bgY+"px";
        img.left = bgX+"px";
        
        
    );
    
)();
    </script>



以前在chrome插件上以jq库为基础写过背景图的缩放平移功能，这里拿相关逻辑过来供参考，仅限于运行在chrome浏览器中

要做ie兼容的话，注意事件对象即可

追问

回答非常好，chrome下运行很好，能帮忙做一下ie兼容吗

追答

鼠标滚轮事件，没有作firefox的兼容处理~

 参考技术A 你这段里边，出问题了？什么问题，描述一下可否？追问

这里是运行正常的，只是现在这里是以浏览器左上角为参照点缩放的，我需要它一鼠标为参照点缩放

追答

你二维坐标学得好不？如果学得好的话，你把图片使用绝对定位，然后放入xy坐标系里边计算。这段真的很好写，也很不好写，我看到数学，头疼……不过，方法大概是。你先获取鼠标相对于图片左上角的坐标，然后图片相对于浏览器内容区域左上角的坐标，然后计算缩放后的尺寸，最后图片的坐标，在这个基础上，各加上缩放值的一半，然后图片的尺寸变成新的尺寸。

追问

主要是我的js太烂了，根本不知道参照点坐标在哪里

追答

这是用想的，你使用jq会比较容易处理这些数据。没有点数学基础你拿啥做特效啊。你试着我刚才说的一步步做，看行不行

用C语言写一个控制鼠标键盘自动点的程序复杂吗

具体需要哪些步驺用哪些软件？我玩游戏用

我这方面是白痴，没接触过C语言，如果有更简单的编程方法还可以告诉我，但不要推荐软件

用按键精灵这个软件，他可以录下键盘，鼠标的动作。然后在按照你录的模拟你录下的动作```这个软件完全可以达到你想要的标准。可以到百度去搜索``使用教程``自己编写那不是一天两天的事 参考技术A

很简单啊~

#include <stdio.h>
#include <stdlib.h>
#include <windows.h>//重要！
int main()

     SetCursorPos(0,0);//设置鼠标坐标
     mouse_event( MOUSEEVENTF_LEFTDOWN, 0,0,0,0);//点击左键
     mouse_event( MOUSEEVENTF_RIGHTDOWN, 0,0,0,0);//点击右键
     return 0;

#include <stdio.h>
#include <stdlib.h>
#include <windows.h>//重要！
int main()

        //字母
keybd_event('A', 0, 0, 0); //按下
keybd_event('A', 0, 2, 0); //松开
//回车
keybd_event(0x0d, 0, 0, 0);
keybd_event(0x0d, 0, 2, 0);

 参考技术B 很简单，大概说一下思路
1、获得指定进程名字的窗口句柄
2、获得制定窗口的位置
3、计算鼠标应该在德位置（相对窗口的位置）
4、发送键盘鼠标消息 参考技术C 可以。不过用按键精灵写更方便。 参考技术D 单独按Windows：显示或隐藏 “开始”功能表
Windows+BREAK：显示“系统属性” 对话框
Windows+D：显示桌面
Windows+M：最小化所有窗口
Windows+Shift+M：还原最小化的窗口
Windows+E：开启“资源管理器”
Windows+F：查找文件或文件夹
Windows+CTRL+ F：查找电脑
Windows+F1：显示 Windows “帮助”
Windows+R：开启“运行” 对话框
Windows+U：开启 “公用程序管理器”
Windows+L：切换使用者（Windows XP新功能）

Ctrl快捷键
Ctrl+S 保存
Ctrl+W 关闭程序
Ctrl+N 新建
Ctrl+O 打开
Ctrl+Z 撤销
Ctrl+F 查找
Ctrl+X 剪切
Ctrl+C 复制
Ctrl+V 粘贴
Ctrl+A 全选
Ctrl+[ 缩小文字
Ctrl+] 放大文字
Ctrl+B 粗体
Ctrl+I 斜体
Ctrl+U 下划线
Ctrl+Shift 输入法切换
Ctrl+空格 中英文切换
Ctrl+回车 QQ号中发送信息
Ctrl+Home 光标快速移到文件头
Ctrl+End 光标快速移到文件尾
Ctrl+Esc 显示开始菜单
Ctrl+Shift+< 快速缩小文字
Ctrl+Shift+> 快速放大文字
Ctrl+F5 在IE中强行刷新
Ctrl+拖动文件 复制文件
Ctrl+Backspace 启动\关闭输入法
拖动文件时按住Ctrl+Shift 创建快捷方式
Alt快捷键

Alt+F4 关闭当前程序
Alt+空格+C 关闭窗口
Alt+空格+N 最小化当前窗口
Alt+空格+R 恢复最小化窗口
Alt+空格+X 最大化当前窗口
Alt+空格+M 移动窗口
Alt+空格+S 改变窗口大小
Alt+Tab 两个程序交换
Alt+255 QQ号中输入无名人
Alt+F 打开文件菜单
Alt+V 打开视图菜单
Alt+E 打开编辑菜单
Alt+I 打开插入菜单
Alt+O 打开格式菜单
Alt+T 打开工具菜单
Alt+A 打开表格菜单
Alt+W 打开窗口菜单
Alt+H 打开帮助菜单
Alt+回车 查看文件属性
Alt+双击文件 查看文件属性
Alt+X 关闭C语言
Shift快捷键

Shift+空格 半\全角切换
Shift+右击 右菜单打开方式
Shift+F10 选中文件的右菜单
Shift+多级文件 全部关闭
Shift+Del 直接删除文件
Shift+＾ 处在中文标点符号半角在智能ABC中省曰号
Shift+\ 处在中文标点符号半角在智能ABC中顿号
快捷键

常规键盘快捷键

Ctrl + C 复制。
Ctrl + X 剪切。
Ctrl + V 粘贴。
Ctrl + Z 撤消。
DELETE 删除。
Shift + Delete 永久删除所选项，而不将它放到“回收站”中。
拖动某一项时按 CTRL 复制所选项。
拖动某一项时按 CTRL + SHIFT 创建所选项目的快捷键。
F2 重新命名所选项目。
CTRL + 向右键 将插入点移动到下一个单词的起始处。
CTRL + 向左键 将插入点移动到前一个单词的起始处。
CTRL + 向下键 将插入点移动到下一段落的起始处。
CTRL + 向上键 将插入点移动到前一段落的起始处。
CTRL + SHIFT + 任何箭头键 突出显示一块文本。
SHIFT + 任何箭头键 在窗口或桌面上选择多项，或者选中文档中的文本。
Ctrl + A 选中全部内容。
F3 搜索文件或文件夹。
Alt + Enter 查看所选项目的属性。
Alt + F4 关闭当前项目或者退出当前程序。
ALT + Enter 显示所选对象的属性。
Alt + 空格键 为当前窗口打开快捷菜单。
Ctrl + F4 在允许同时打开多个文档的程序中关闭当前文档。
Alt + Tab 在打开的项目之间切换。
Alt + Esc 以项目打开的顺序循环切换。
F6 在窗口或桌面上循环切换屏幕元素。
F4 显示“我的电脑”和“Windows 资源管理器”中的“地址”栏列表。
Shift + F10 显示所选项的快捷菜单。
Alt + 空格键 显示当前窗口的“系统”菜单。
Ctrl + Esc 显示“开始”菜单。
ALT + 菜单名中带下划线的字母 显示相应的菜单。
在打开的菜单上显示的命令名称中带有下划线的字母 执行相应的命令。
F10 激活当前程序中的菜单条。
右箭头键 打开右边的下一菜单或者打开子菜单。
左箭头键 打开左边的下一菜单或者关闭子菜单。
F5 刷新当前窗口。
BackSpace 在“我的电脑”或“Windows 资源管理器”中查看上一层文件夹。
Esc 取消当前任务。
将光盘插入到 CD-ROM 驱动器时按 SHIFT 键 阻止光盘自动播放
对话框快捷键

Ctrl + Tab 在选项卡之间向前移动。
Ctrl + Shift +Tab 在选项卡之间向后移动。
Tab 在选项之间向前移动。
Shift + Tab 在选项之间向后移动。
ALT + 带下划线的字母 执行相应的命令或选中相应的选项。
Enter 执行活选项动或按钮所对应的命令。
空格键 如果活选项动是复选框，则选中或清除该复选框。
箭头键 活选项动是一组选项按钮时，请选中某个按钮。
F1 显示帮助。
F4 显示当前列表中的项目。
BackSpace 如果在“另存为”或“打开”对话框中选中了某个文件夹，则打开上一级文件夹。
自然键盘快捷键

在“Microsoft 自然键盘”或包含 Windows 徽标键() 和“应用程序”键() 的其他兼容键盘中，您可以使用以下快捷键。

请按 目的
显示或隐藏“开始”菜单。
win+ BREAK 显示“系统属性”对话框。
+ D 显示桌面。
+ M 最小化所有窗口。
+ Shift + M 还原最小化的窗口。
+ E 打开“我的电脑”。
+ F 搜索文件或文件夹。
CTRL+ + F 搜索计算机。
+ F1 显示 Windows 帮助。
+ L 如果连接到网络域，则锁定您的计算机，或者如果没有连接到网络域，则切换用户。
+ R 打开“运行”对话框。
显示所选项的快捷菜单。
+ U 打开“工具管理器”。
辅助键盘快捷键

请按 目的
右侧 SHIFT 键八秒钟 切换“筛选键”的开和关。
左边的 ALT + 左边的 SHIFT + PRINT SCREEN 切换“高对比度”的开和关。
左边的 ALT + 左边的 SHIFT + NUM LOCK 切换“鼠标键”的开和关。
Shift 键五次 切换“粘滞键”的开和关。
Num Lock 键五秒钟 切换“切换键”的开和关。
+ U 打开“工具管理器”。
“Windows 资源管理器”键盘快捷键

请按 目的
END 显示当前窗口的底端。
主页 显示当前窗口的顶端。
NUM LOCK + 数字键盘的星号 (*) 显示所选文件夹的所有子文件夹。
NUM LOCK + 数字键盘的加号 (+) 显示所选文件夹的内容。
NUM LOCK + 数字键盘的减号 (-) 折叠所选的文件夹。
左箭头键 当前所选项
处于展开状态时折叠该项，或选定其父文件夹。
右箭头键 当前所选项处于折叠状态时展开该项，或选定第一个子文件夹

以上是关于用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，鼠标滚轮事件的主要内容，如果未能解决你的问题，请参考以下文章

qt语言，以鼠标为中心点进行放大和缩小。

原生JavaScript实现滚动条

JavaScript：通过鼠标单击获取输入文本位置（以字符为单位）

用HTML和JavaScript代码编写一个至少有3个框架的网页：

用C语言写一个控制鼠标键盘自动点的程序复杂吗

用WPF写一个登录界面，我想在输入完密码后按回车就能够验证登陆，而不需要用鼠标单击登陆按钮