<!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. Asp.Net中使用水晶报表（中）

    Asp.Net中使用水晶报表(中) 使用Pull模式 我们将通过下面的这些步骤来通过Pull模式来执行水晶报表 1.首先创建rpt文件,并使用水晶报表设计接口设置一些必须的数据连接. 2.拖放一个 C ...

  2. js变量作用域和闭包的示例

    <script> /* js是函数级作用域,在函数内部的变量,内部都能访问, 外部不能访问内部的,但是内部可以访问外部的变量 闭包就是拿到本不该属于他的东西,闭包会造成内存泄漏,你不知道什 ...

  3. jsLittle源码封装对象

    window.JSLi = ((function(){ var JSLi = function(selector) { return new JSLi.fn.init(selector); }; JS ...

  4. Functor& Monad解读

    整体上代表封装的概念,重点是函数的封装,及函数运行的上下文环境.trait Functor[F[_]] Functor:代表整体封装: F[_]:代表封装后的目标域. A.B:代表普通的对象:f:代表 ...

  5. es6 学习1 let表示变量 、const表示常量 与 var 变量的区别

    一.let 1.看下代码,在函数中无论在哪里声明变量,都会自动提到函数顶部,这就是函数变量提升,它的作用于为当前函数中. function aa() { if(bool) { var test = ' ...

  6. CF718C Sasha and Array（线段树维护矩阵）

    题解 (不会矩阵加速的先去学矩阵加速) 反正我想不到线段树维护矩阵.我太菜了. 我们在线段树上维护一个区间的斐波那契的列矩阵的和. 然后询问时提取每个符合题意列矩阵的答案项(不是列矩阵存了两项吗,一个 ...

  7. 学习优化《机器学习与优化》中文PDF+英文PDF

    正在学习机器学习中的优化处理,感觉<机器学习与优化>写得还是比较通俗易懂的,第七章特征选择我需要,特征提取:相关系数,相关比,熵和互信息..更高级的应该是文本挖掘的特征提取,比如LDA提取 ...

  8. 【BZOJ 1047】[HAOI2007]理想的正方形

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二维的ST表. 每个大的正方形可以由4个小的正方形组成. 然后区域内的最大值最小值.也可以由4个小的张方形部分全部覆盖到. [代码] ...

  9. EF框架—Database-First

    ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,现已经包含在 Visual Studio 2008 S ...

  10. DF标志和串移动指令(movsb/movsw)

    1.标志寄存器的第10位DF,方向标志位.在串处理指令中,控制每次操作后si,di的增减 DF=0,每次操作后,si.di添加 DF=1,每次操作后,si.di减小 我们能够用汇编语法描写叙述movs ...