html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小

滚轮控制元素放大缩小

#img{ position: absolute; top: 100px; left: 200px; }

var img = document.querySelector("#img");

mouseWheel(img, function (event,down){

var oldWidth = this.offsetWidth; //宽高初始值

var oldHeight = this.offsetHeight;

var oldLeft = this.offsetLeft; //偏移量初始值

var oldTop = this.offsetTop;

var x = event.clientX; //鼠标坐标

var y = event.clientY;

//鼠标坐标的位置在图片中的比例

var scaleX = (x - oldLeft) / oldWidth;

var scaleY = (y - oldTop) / oldHeight;

//(鼠标坐标 - 元素初始偏移量 = 鼠标坐标在元素体内的距离)/ 元素初始宽高

if(down){

this.width = oldWidth + 10; //滚轮向下滚宽度+10

if (this.width > 800){

this.width = 800;

}

}else{

this.width = oldWidth - 10; //滚轮向上滚宽度-10

if (this.width < 300){

this.width = 300;

}

//获取图片大小的变化量

var imgChangeWidth = this.offsetWidth - oldWidth;

var imgChangeHeight = this.offsetHeight - oldHeight;

//鼠标在图片中的比例 * 图片大小的变化量 = left/top的变化量

var l = oldLeft - (scaleX * imgChangeWidth);

var t = oldTop - (scaleY * imgChangeHeight);

this.style.left = l + "px";

this.style.top = t + "px";

});

html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小相关推荐

html图片缩放作为背景,css怎么把背景图片缩小？
在CSS中,想要缩小背景图片,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性,希望对大家有所帮助. background-s ...
ArcEngine中的地图缩放相关的常用操作以及固定比例放大缩小
资料1: 这两个功能,和全图一样简单,也是继承CommandBase基类 public override void OnClick(){//Get IEnvelope interfaceIEnvelo ...
图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
先上效果演示: 功能说明选择图片区域并剪裁为头像 Html部分页面分左右两部分:左边显示遮罩图片的缩放与拖动,右边显示剪裁后图片的预览 <div class="content&qu ...
[转]图片自动缩放 js图片缩放
转自:http://hi.baidu.com/crystalhx/blog/item/deba9b2320274340ac34de09.html 图片自动缩放 js图片缩放 2008-03-27 10 ...
php怎么计算图片的大小,php 根据比例计算图片缩放尺寸函数的用法
这篇文章主要为大家详细介绍了php 根据比例计算图片缩放尺寸函数的用法,具有一定的参考价值,可以用来参考一下. 面向512笔记编程,下面跟随512笔记的小编来举个例子吧. 经测试代码如下: /** * ...
微信公众平台后台编辑器上线图片缩放和封面图裁剪功能
今日,微信公众平台后台编辑器又上线了两个更新,图片缩放和封面图裁剪功能,微信团队真喜欢深夜放毒,不想让人睡的节奏.[微信公众平台编辑器可以剪裁和替换正文图片了] 两个新增的功能如下 1.图片缩放插入 ...
使用斯凯平台图片缩放函数注意的地方
// //sky-mobi 提供的图片显示接口 // /* 将mrp中名为filename的图片,从(x, y)开始的宽高为w, h的区域, 加载到序号为i的bmp缓冲中.max_w为名为filena ...
TouchImageView 实现图片的缩放，双击放大缩小，多点触控的功能
首先扯点别的:昨天约人打拳皇,又被一顿海虐,也是艰难.万水千山总是情,虐我轻点行不行?八神用的越来越水了,昨天下午饭都没有胃口了.看样是时候退出拳皇97界了. 进入正题:今天说一个GITHUB上的一个 ...
CSDN博客 - Markdown：博客内图片缩放、删减水印等的相关操作
因为CSDN也不断在更新,发现它现在的编辑器也有更新, 这样以前的一些操作就失效了,所以写了这个文章, 希望对CSDN的小伙伴们能有所帮助. 如果发现本文有和现在博客操作不一致的情况,欢迎留言或者私信 ...
ppt矩形里面的图片怎么放大缩小_ppt 怎么让图片放大完成以后再缩小到原来的大小和位子！！！！...
本人也在学习中,愿意与大家一起探讨.第一步:点击图片[添加动画][强调][放大缩小][较小]或[微小].第二步:再[添加动画][动作路径][直线]或[自定义路径]自己选择路径返回到原点.放大缩小与动作 ...

html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小

html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小相关推荐

最新文章

热门文章

html5 图片缩放 鼠标滚轮,鼠标滚轮实现图片的放大缩小

html5 图片缩放 鼠标滚轮,鼠标滚轮实现图片的放大缩小相关推荐

最新文章

热门文章

html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小

html5 图片缩放鼠标滚轮,鼠标滚轮实现图片的放大缩小相关推荐