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>

转载于:https://www.cnblogs.com/qshting/p/5733252.html

JS-以鼠标位置为中心的滑轮放大功能demo1相关推荐

JS获取鼠标位置，兼容IE FF
JS获取鼠标位置,兼容IE FF 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事 ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
以鼠标位置为中心的图片滚动放大缩小
1 //以鼠标位置为中心的图片滚动放大缩小 2 $(document).on("mousewheel","#mask img",function(ev){ 3 ...
QT编写实现图片的幻灯片播放、自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、重置、显示鼠标位置像素坐标及RGB值、播放GIF动画、截图保存、批量保存、拖入文件夹遍历所有文件
这个图片查看器功能很多,是我花了不少心思,不断优化,不断添加功能的成果: 1.能打开并显示所有常用图片格式文件,显示鼠标位置像素坐标及RGB值 2.能缩放,拖动图片,可以以鼠标为中心滚动滚轮进行缩放 ...
js获取鼠标位置和滚动条位置
1相对窗口,当然是以浏览器窗口为主了,即浏览器中可见部分(即包含文档部分)的左上角为坐标原点.这是用clientX和clientY获取的. 2相对屏幕,当然是以你的显示器为主了,显示器的左上角为原点, ...
js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
html点击页面放大,JS实现点击图片跳转页面放大功能【原创】
如图: 点击图片时跳转链接,要求放大图片和底部有缩略图,如图所示: 思路: 1).在列表页,给每一个数据加上对应的标识位,点跳转时传过去 2).获取值.获取屏幕宽度 var number = '{{ ...
Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片
先放参考文章: Unity3d UGUI以鼠标位置点为中心缩放图片(含项目源码)https://blog.csdn.net/qq_33789001/article/details/117749837 ...
js判断鼠标靠近屏幕最侧面的监听_threejs按鼠标位置缩放场景
threejs的orbitcontrol,默认的缩放模式为整体以target为中心进行缩放.有时候,我们想让场景按照鼠标位置进行缩放,体验起来就和地图的缩放一样,最直观的感觉就是整个场景会越来越靠近鼠 ...

JS-以鼠标位置为中心的滑轮放大功能demo1

JS-以鼠标位置为中心的滑轮放大功能demo1相关推荐

最新文章

热门文章