JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>以鼠标位置为中心的滑轮放大功能demo</title>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
#oImg {
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
</style>
<script type="text/javascript">
/*绑定事件*/
function addEvent(obj, sType, fn) {
if (obj.addEventListener) {
obj.addEventListener(sType, fn, false);
} else {
obj.attachEvent('on' + sType, fn);
}
};
function removeEvent(obj, sType, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(sType, fn, false);
} else {
obj.detachEvent('on' + sType, fn);
}
};
function prEvent(ev) {
var oEvent = ev || window.event;
if (oEvent.preventDefault) {
oEvent.preventDefault();
}
return oEvent;
}
/*添加滑轮事件*/
function addWheelEvent(obj, callback) {
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
addEvent(obj, 'DOMMouseScroll', wheel);
} else {
addEvent(obj, 'mousewheel', wheel);
}
function wheel(ev) {
var oEvent = prEvent(ev),
delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
callback && callback.call(oEvent, delta);
return false;
}
};
/*页面载入后*/
window.onload = function() {
var oImg = document.getElementById('oImg');
/*拖拽功能*/
(function() {
addEvent(oImg, 'mousedown', function(ev) {
var oEvent = prEvent(ev),
oParent = oImg.parentNode,
disX = oEvent.clientX - oImg.offsetLeft,
disY = oEvent.clientY - oImg.offsetTop,
startMove = function(ev) {
if (oParent.setCapture) {
oParent.setCapture();
}
var oEvent = ev || window.event,
L = oEvent.clientX - disX,
T = oEvent.clientY - disY;
oImg.style.left = L +'px';
oImg.style.top = T +'px';
oParent.onselectstart = function() {
return false;
}
}, endMove = function(ev) {
if (oParent.releaseCapture) {
oParent.releaseCapture();
}
oParent.onselectstart = null;
removeEvent(oParent, 'mousemove', startMove);
removeEvent(oParent, 'mouseup', endMove);
};
addEvent(oParent, 'mousemove', startMove);
addEvent(oParent, 'mouseup', endMove);
return false;
});
})();
/*以鼠标位置为中心的滑轮放大功能*/
(function() {
addWheelEvent(oImg, function(delta) {
var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
w = parseInt(oImg.offsetWidth * ratioDelta),
h = parseInt(oImg.offsetHeight * ratioDelta),
l = Math.round(this.clientX - (w * ratioL)),
t = Math.round(this.clientY - (h * ratioT));
with(oImg.style) {
width = w +'px';
height = h +'px';
left = l +'px';
top = t +'px';
}
});
})();
};
</script>
</head>
<body>
<img id="oImg" src="data:images/demo.jpg" />
</body>
</html>
JS-以鼠标位置为中心的滑轮放大功能demo1的更多相关文章
- 在WPF里面实现以鼠标位置为中心缩放移动图片
原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...
- JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- JS获得鼠标位置
<body> <script> function mouseMove(ev) { ev = ev || window.event; var mousePos = mouseCo ...
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
- js获取鼠标位置
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...
- js 获取 鼠标位置 和获取元素位置
]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...
- js 实现页面局部（或图片）放大功能(vue)
方法: adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.style ...
- js获得鼠标的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- HDU 6108.小C的倍数问题 (2017"百度之星"程序设计大赛 - 初赛（A）1001)
补完题?不存在的. 这么久了,还是一条咸鱼,看一堆乱七八糟的东西,写一堆没用的水题,一点进步都没有,还是那么菜,菜的掉渣. 这个百毒之星初赛A还会写两道最简单的水题,初赛B一点也不会,菜的难过... ...
- HDU 5886 Tower Defence（2016青岛网络赛 I题，树的直径 + DP）
题目链接 2016 Qingdao Online Problem I 题意 在一棵给定的树上删掉一条边,求剩下两棵树的树的直径中较长那的那个长度的期望,答案乘上$n-1$后输出. 先把原来那棵树的 ...
- Python的支持工具[1] -> 可执行文件生成工具[1] -> cx_freeze
cx_freeze cx_Freeze 是一个第三方库,可以用于将 Python 的代码打包成可执行文件,下面介绍如何利用一个脚本文件将 Python 代码变为 exe 可执行文件. 首先,需要安装 ...
- springboot静态资源映射
springboot静态资源映射 WebMvcAutoConfiguration @Override public void addResourceHandlers(ResourceHandlerRe ...
- System.getProperty("os.name")
Here is a handy Java class that useSystem.getProperty("os.name") to detect which type of o ...
- Email List
题目:给几个Email的list,输出全部list的交集(在全部list中都出现过的email). 思路:用set记录前i个list中都含有的email,当进行第i+1时,检查每个email是否在该s ...
- Windows下SVN权限配置过程详解
本节讲解一下Windows下SVN权限配置说明,针对的是一个目录下多库的情况,下面是具体的介绍,希望通过本文的学习,你能够对SVN权限配置问题有更加深刻的认识. 1.本文档适用于对Subvesion的 ...
- 如何将netbeans生成的项目文件打包发布到其他的Tomcat服务器上？
首先在netbeans中将项目文件生成.war文件,一个war包就是有特性格式的jar包,它是将一个Web程序的所有内容进行压缩得到,在netbeans中,在项目名称上右击鼠标->"清 ...
- 解魔方的机器人攻略14 – 安装Lejos（下）
由 动力老男孩 发表于 2009/12/27 17:16:11 第四步:安装Lejos 登陆 Lejos 主页点击 NXT 图片进入 Lejos 下载页面,点击 NXJ 的下载链接: 下载完成后将下载 ...
- mysql-essential-5.1.55-win32 安装
1.选择无事物安装 2.my.cnf [mysqld] default-storage-engine=INNODB innodb=on 3.设置数据目录 手动创建目录 D:\data [mysqld] ...