js代码:

function bb_img_onmousewheel(e, o) {

    var zoom = parseInt(o.style.zoom, 10) || 100;

    zoom += event.wheelDelta / 12;

    if (zoom > 0) o.style.zoom = zoom + '%';

    return false;

}

图片html标签:

<img onmousedown="if(self.startMove)startMove(this,event)" onmousewheel="return bb_img_onmousewheel(event,this)" style="cursor: move; zoom: 80%;" src="" width="600px" />

js控制图片放大缩小的简易版的更多相关文章

  1. 测试cnblogs的代码折叠展开功能和zoom.js实现图片放大缩小冲突的问题

    #!/usr/bin/env python # -*- coding:utf- -*- def test(): print('from the test'

  2. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  5. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  6. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  7. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  8. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  9. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

随机推荐

  1. 前端画图之iphoneSE主屏

    今天逛园子,无意间看到一个用div+css画的Macbook Air的博客,瞬间想到很久之前我也做过类似的事, 而且,当时写完之后,真的是成就感爆棚啊!我去开源中国上翻到了我当时贴的源码,当时是在手机 ...

  2. InnoSetup使用笔记

    今天用InnoSetup做安装包时,因为要装的驱动区分32位.64位,64位系统中要安装32位+64位驱动. 想在脚本中进行判断.折腾一阵,终于搞定: 参考了:http://379910987.blo ...

  3. del语句

    5.2. del 语句 有个方法可以从列表中按给定的索引而不是值来删除一个子项: del 语句.它不同于有返回值的 pop() 方法.语句 del 还可以从列表中删除切片或清空整个列表(我们以前介绍过 ...

  4. 【占位】HihoCoder 1160 : 攻城略地（并查集好题）

    攻城略地 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 A.B两国间发生战争了,B国要在最短时间内对A国发动攻击.已知A国共有n个城市(城市编号1, 2, …, n),城 ...

  5. jQuery的ajax跨域实现

    今天有人问我跨域ajax请求是否可以发送,之前没接触过此类问题,没答上,后来查了下,以下备忘. 我在本地建了三个站点,并设置了host文件模拟跨子域和跨全域 coolkissbh.com blog.c ...

  6. 连续创建多个Oracle触发器失败，单个创建才成功的解决方法

    当用到自增序列,需要用到触发器的时候,当我连续执行创建多个触发器时,总是报编译通过,但存在警告或错误. ---.应用信息 drop table app_info cascade constraints ...

  7. FastAdmin + uni-app

    FastAdmin + uni-app FastAdmin https://www.FastAdmin.net uni-app http://uniapp.dcloud.io/ 自己先挖个坑.

  8. （转）Download interrupted: Connection to https://dl-ssl.google.com refused

    (转)Download interrupted: Connection to https://dl-ssl.google.com refused   这个可能是网络问题,国内连google服务器经常连 ...

  9. 64位linux下rpm安装mysql的5.5.55版本

    昨天同事开了个阿里云环境,让我帮他安装mysql数据库,本想着很简单的一件事,结果还是折腾了一番.坑很多,一路趟过,一个接一个,只能硬着头皮冲. 首先是下载压缩包,因为采用了rpm安装方式,所以下载的 ...

  10. EditText动态转换只读/编辑状态

    public class MyActivity extends Activity { private KeyListener listener; private EditText editText; ...