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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Language" content="zh-cn" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >

<title>用鼠标滚轮滚动控制图片的缩小放大</title>

<style type="text/css">

</style>

<script language="javascript">

    function bbimg(o){

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

        zoom += event.wheelDelta / 100;

        console.log(event.wheelDelta);

        if (zoom > 0) {

            o.style.zoom = zoom + '%';

        }

            return false;

    }

</script>

</head>

<body>

<p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p>

<p><img border="0" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528862370826&di=17ebe8a1a56a7fc6cc18b22aecd83679&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F96dda144ad345982b391b10900f431adcbef8415.jpg" 
　　　　　　　　　　　 onmousewheel="return bbimg(this)"></p>

</body>

</html>

js -- img 随着鼠标滚轮的变化变化的更多相关文章

  1. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  2. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  3. js/jq判断鼠标滚轮方向

    js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...

  4. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

  5. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  6. javaScript判断鼠标滚轮的上下滚动

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...

  7. jQuery 鼠标滚轮插件 jquery.mousewheel.js

    jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...

  8. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. jdk--rpm.bin文件安装, zip解压与创建

    3,执行命令赋予安装文件777权限: # cd /usr/java(mkdir java –此目录需要创建) ①jdk-1_5_0_16-linux-i586-rpm.bin文件安装 # chmod ...

  2. SQL Server存储ntext截断问题

    SQL Server存储ntext截断问题   最近遇到一个问题:将大文本存储到数据库的时候,查询出来的文本却被截断了. 最后百度发现,作者提出 sql server management studi ...

  3. 守护、互斥锁、IPC和生产者消费者模型

    守护进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic processes are ...

  4. hdu 6363 bookshelf

    题解讲的很清楚了,直接看代码就懂了 题解:http://bestcoder.hdu.edu.cn/blog/2018-multi-university-training-contest-6-solut ...

  5. JDK工具(一)–Java编译器javac

    1.概述    javac.exe: Java编译器,将Java源代码转换成字节码. 2.用法    javac <选项> <源文件> (使用过程中发现,javac <源 ...

  6. Python学习笔记(5)--数据结构之字典dict

    字典(dict) 定义:键值对集合 初始化:{}, {'1' : 'abc', '2' : 'def'} 1.增加:单个数据直接赋值  update(dict2) ---把dict2的元素加入到dic ...

  7. ECNUOJ 2859 表达式的个数

    表达式的个数 Time Limit:5000MS Memory Limit:65536KBTotal Submit:47 Accepted:28 Description  世情薄,人情恶,雨送黄昏花易 ...

  8. COGS——T 2478. [HZOI 2016]简单的最近公共祖先

    http://www.cogs.pro/cogs/problem/problem.php?pid=2478 ★☆   输入文件:easy_LCA.in   输出文件:easy_LCA.out   简单 ...

  9. Android Studio获取开发版SHA1值和发布版SHA1值，详细过程

    转自原文 Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘 ...

  10. Redis中的持久化操作

       本篇博客主要来解说一下怎样Redis中的持久化操作,当然了不是一篇理论性的博客,主要还是分享一下在redis中怎样来配置持久化操作.  1.介绍  redis为了内部数据的安全考虑,会把本身的数 ...