以鼠标位置为中心的图片滚动放大缩小

 1  //以鼠标位置为中心的图片滚动放大缩小
 2 $(document).on("mousewheel","#mask img",function(ev){
 3     var oImg = this;
 4     var ev = event || window.event;//返回WheelEvent
 5     ev.preventDefault();
 6     var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
 7     var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
 8         ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
 9         ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
10         w = parseInt(oImg.offsetWidth * ratioDelta),
11         h = parseInt(oImg.offsetHeight * ratioDelta),
12         l = Math.round(ev.clientX - (w * ratioL)),
13         t = Math.round(ev.clientY - (h * ratioT));
14         with(oImg.style) {
15             width = w +'px';
16             height = h +'px';
17             left = l +'px';
18             top = t +'px';
19         }
20 });

废话不多说，相信程序员看了都知道怎么用。

转载于:https://www.cnblogs.com/crystal123/p/6647076.html

以鼠标位置为中心的图片滚动放大缩小相关推荐

html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
图片滚动放大缩小旋转
需求就是页面浏览一张图片,要求提供放大.缩小.旋转的功能这里实现的方式是使用jquery的一个iviewer插件具体实现方式已经提供在下载包中,下载链接:http://download.csdn. ...
JavaFX鼠标滚动放大缩小图片
一.鼠标滚动放大缩小图片 package cn.util;import java.io.File; import javafx.application.Application; import java ...
JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
ZoomMarker 一款用于图片滚动放大拖动，且可以添加标记的jQuery插件
猛戳这里导航至项目地址. #Language Chinese English ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件在项目中需要实现类似地图应用那样的,具有 ...
element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览最近同事在写一个关于图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
iOS 仿淘宝实现商品规格图片的放大缩小功能
刚好最近在做个商城项目,甲方爸爸说咱们要求不高,你就照着淘宝来就好,额~~~~ 好吧,咱就不吐槽了,直接开撸吧,惯例先上一下效果图需求以及思路我们要实现的功能有如下几个: 图片的全屏查看以及保存 ...
C语言实现BMP图片的放大缩小
C语言实现BMP图片的放大缩小 BMP图片简介:BMP图片是windows操作系统中的标准图像文件格式,可以分为两类:设备相关位图(DDB)和设备无关位图(DIB),使用广泛.它采用位映射存储格式,除 ...

以鼠标位置为中心的图片滚动放大缩小

以鼠标位置为中心的图片滚动放大缩小相关推荐

最新文章

热门文章