js实现鼠标滚轮缩放图片

不支持Firefox。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script language="javascript">function bbimg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;zoom += event.wheelDelta / 12;if (zoom > 0) o.style.zoom = zoom + '%';return false;}</script></head><body><p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p><p><img border="0" src="../../static/img/test/award_1.png" onmousewheel="bbimg(this)"></p></body></body></html>

js实现鼠标滚轮缩放图片相关推荐

Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
Vue 实现鼠标滚轮缩放图片并拖动
需求:实现鼠标滚轮上滚下滚缩放图片,单击不松开拖动图片给图片添加一个盒子 // dom <div @mousewheel.prevent="rollImg" class=& ...
Python OpenCV：利用鼠标移动缩放图片
一.实现目标在OpenCV中通过鼠标左键拖拽移动图片,通过鼠标滚轮前后旋转放大缩小图片. 二.实现背景在前一篇博客在OpenCV中使用滚动条显示大图中发现自己画滚动条移动大图略显繁琐,且缩 ...
VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括: 鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形: 选中矩形,并绘制不同选中效果: 鼠标在已绘制的矩形中按住左键拖动,选中并移动矩形:选中矩形后鼠标在选中矩 ...
图片预览，且鼠标滚轮缩放
图片预览,且鼠标滚轮缩放 <!DOCTYPE html> <head><meta charset="utf-8"><meta http-e ...
js禁止鼠标滑轮_JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
本文实例讲述了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法.分享给大家供大家参考,具体如下: 为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! 测试 var scrollFunc=fu ...
JS实现鼠标滚轮缩小放大拖动图片代码
Jquery,JS实现鼠标滚轮缩小放大拖动图片代码直接上代码:可以直接使用: <!doctype html public "-//W3C//DTD XHTML 1.0 Transit ...
js 静止滚轮_JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
本文实例讲述了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法.分享给大家供大家参考,具体如下: 为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! 测试 var scrollFunc=fu ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...

js实现鼠标滚轮缩放图片

js实现鼠标滚轮缩放图片相关推荐

最新文章

热门文章