zoukankan      html  css  js  c++  java
  • JavaScript--鼠标滚动改变图片大小

    鼠标滚动改变图片的大小:

    原理:当鼠标滚动时改变了zoom的值;

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>通过鼠标滚轮放大缩小图片</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    div {
                
                height: 200px;
                background: pink;
                text-align: center;
            }
            img {
                 margin: 0 auto;         
            }
    
    </style>
    </head>
    <script language="javascript">
    function bigimg(obj) {
        //obj是一个对象,初始时obj并没有zoom属性,所以给zoom赋值为100;
        var zoom = parseInt(obj.style.zoom)||100;
        //每次滚动鼠标时,改变zoom的大小
        //event.wheelDelta有两个值,120,-120,取值情况取决于滚动鼠标的方向;
        zoom += event.wheelDelta/12;//每次滚动加减10;
        if (zoom > 0) {
            obj.style.zoom = zoom+"%";//更改后的zoom赋值给obj
            console.log(obj.style.zoom);
        }
        return false;
        
    }
    </script>
    <body>
    <div>
        <img src = "images/6.jpg" width="500px" heigth="450px" onmousewheel="bigimg(this)">
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    json转MAP
    责任链模式
    单例模式
    代理模式
    策略模式
    mysql触发器的使用
    Java 中的日期和时间
    MySQL插入数据前检测唯一性
    java字符串转为Map类型:split()方法的应用
    java Socket实例
  • 原文地址:https://www.cnblogs.com/Ayinger/p/6892677.html
Copyright © 2011-2022 走看看