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. [置顶] Kubernetes1.7新特性：支持绕过docker，直接通过containerd管理容器

    背景情况 从Docker1.11版本开始,Docker依赖于containerd和runC来管理容器,containerd是控制runC的后台程序,runC是Docker公司按照OCI标准规范编写的一 ...

  2. Python标准库之time和datetime

    注:博客转载自:https://www.cnblogs.com/zhangxinqi/p/7687862.html 1.python3日期和时间 Python 程序能用很多方式处理日期和时间,转换日期 ...

  3. jenkins部署应用

    1.    系统介绍 Jenkins系统提供了一键部署的作用,整个过程有从提测的分支抓取代码,编译,打包,把打的包部署在应用服务器上,基本有Service,Web和Worker等. 2.    Jen ...

  4. 关于fpga的m9k的部分理解

    1.控制信号包括时钟使能,读写使能,字节使能,地址使能,异步清零等 2.可配置为单端口,简单双端口,真双端口,fifo,rom,移位寄存器. 3.关于移位寄存器模式的介绍如下: 一个 ( w × m ...

  5. Linux环境安装redis

    redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载源码,解压缩后编译源码. $ wget ...

  6. BZOJ1355：[Baltic2009]Radio Transmission

    浅谈\(KMP\):https://www.cnblogs.com/AKMer/p/10438148.html 题目传送门:https://lydsy.com/JudgeOnline/problem. ...

  7. (转)在二元树中找出和为某一值的所有路径,java版本

    摘自:http://www.cnblogs.com/qi09/archive/2011/05/24/2055643.html 4.在二元树中找出和为某一值的所有路径 题目:输入一个整数和一棵二元树.  ...

  8. android生命周期参考

    public class ActivityDemo extends Activity { private static final String TAG = "ActivityDemo&qu ...

  9. split的用法回顾，快忘记了@ →@

    split:用for循环时不要忘记是数组名.length package com.aaa; //split的用法把指定的字符串按指定的分割符进行分割,然后返回字符串 数组 public class f ...

  10. XModem协议

    XModem协议介绍: XModem是一种在串口通信中广泛使用的异步文件传输协议,分为XModem和1k-XModem协议两种,前者使用128字节的数据块,后者使用1024字节即1k字节的数据块. 一 ...