用滚轮实现图片缩放〔zz〕

从chinaren校友录中找的代码，自己简化了一下，只提取了必须的部分，并加上了注释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>用滚轮实现图片缩放</title>

</head>

function zoomimg(img)

{

//img.style.zoom获取img对象的缩放比例，并转为十进制整数

var zoom = parseInt(img.style.zoom,10);

if (isNaN(zoom))

{ //当zoom非数字时zoom默认为100％

zoom = 100;

}

//event.wheelDelta滚轮移动量上移＋120，下移－120；显示比例每次增减10％

zoom += event.wheelDelta / 12;

//当zoom大于10％时重新设置显示比例

if (zoom>10) img.style.zoom = zoom + "%";

}

</script>

<body>

<br>

</body>

</html>

转载于:https://www.cnblogs.com/penboy/archive/2005/08/21/219318.html

用滚轮实现图片缩放〔zz〕相关推荐

QT学习笔记（三）——vs2019+Qt实现打开影像并以鼠标为中心用滚轮控制图片缩放
vs2019+Qt实现打开影像并以鼠标为中心用滚轮控制图片缩放之前写了一个博客讲怎么显示一张影像,那个是基于Qpainter的今天使用QLabel来显示影像,并且用鼠标滚轮控制缩放. 关于图像的打 ...
jquery 鼠标滚轮实现图片缩放
方法一:(不支持火狐) <span style="font-size:14px;"><span style="font-size:14px;" ...
javafx实现图片缩放和拖动
目录前言方式一方式二 1.带有滚动条的缩放 (1)代码 (2)效果 2.fxml 布局+java代码 (1) fxml 布局文件 (2) java 代码 (3) 效果前言本文使用的是 jdk ...
图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
先上效果演示: 功能说明选择图片区域并剪裁为头像 Html部分页面分左右两部分:左边显示遮罩图片的缩放与拖动,右边显示剪裁后图片的预览 <div class="content&qu ...
鼠标滚轮实现图片的缩放-------Day79
今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了,一则工作确实紧了些,再则没能处理好生活.工作和学习的节奏,这才是人生最大的课题吧,不过也还好,至少自己还在坚持着,其实真的越来 ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
PyQt5实现图片缩放、旋转
下面讲述PyQt5实现图片缩放.旋转的两种方式第一种基于鼠标滚轮缩放,左右键移动 pyqt5实现过程如下 # -*- coding: utf-8 -*-from PyQt5 import QtCor ...
Android安卓开发中图片缩放讲解
安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
网页图片缩放的深入剖析
一.浏览器图片缩放默认表现行为行为在想出解决方案之前,首先要弄清楚浏览器对于图片尺寸是怎么处理的,稍安勿躁,一步一步来分析下. 一个图片可以改变成任意尺寸,容器是80%: <div>&l ...

用滚轮实现图片缩放〔zz〕

用滚轮实现图片缩放〔zz〕相关推荐

最新文章

热门文章