zoukankan      html  css  js  c++  java
  • 滑动滚轮放大缩小

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        *{margin:0; padding:0; list-style:none;}
        body{
            height: 2000px;
        }
        #box{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
    </head>
    <body>
    <div id="box"></div>
    <script>
        var box=document.getElementById('box');
        var str=window.navigator.userAgent.toLowerCase();
        if (str.indexOf('firefox')!=-1) {//火狐浏览器
            box.addEventListener('DOMMouseScroll',function (event){
                // event.preventDefault();//阻止窗口默认的滚动事件
            // console.log(event.detail);//前滚-3
            if (event.detail<0) {
                console.log('前滚');
                box.style.width=box.offsetWidth+20+'px';
                box.style.height=box.offsetHeight+20+'px';
            };
            if (event.detail>0) {
                console.log('后滚');
                box.style.width=box.offsetWidth-20+'px';
                box.style.height=box.offsetHeight-20+'px';
            };
            return false;//阻止默认事件
            },false);
        } else{//非火狐浏览器
            box.onmousewheel=function (ev){
                var e=ev||window.event;
                /*if (e.preventDefault) {
                    e.preventDefault();
                } else{
                    e.returnValue=false;
                };*/
                // console.log(e);
                // console.log(e.wheelDelta);//前滚120
                if (e.wheelDelta>0) {
                console.log('前滚');
                box.style.width=box.offsetWidth+20+'px';
                box.style.height=box.offsetHeight+20+'px';
            };
            if (e.wheelDelta<0) {
                console.log('后滚');
                box.style.width=box.offsetWidth-20+'px';
                box.style.height=box.offsetHeight-20+'px';
            };
            return false;//阻止默认事件
            }
        };
        
    </script>
    </body>
    </html>
  • 相关阅读:
    CUDA 函数前缀与存储器前缀讨论
    VC++控制台程序中使用定时器
    C++中的RTTI
    C/C++ 时间转换与表示
    [转]winsock和winsock2冲突
    自然归并排序 c++ (原创)
    关于CC++运行时库的多线程版本的工作记录
    关于sizeof(原)
    结构体最后的长度为0或1数组的作用(转载)
    CUDA中常见的错误:the launch timed out and was treminated.
  • 原文地址:https://www.cnblogs.com/duenyang/p/5862797.html
Copyright © 2011-2022 走看看