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>
  • 相关阅读:
    ES6新特性概览
    ECMAScript 位运算符
    jQuery源码分析系列(39) : 动画队列
    浏览器的工作原理:新式网络浏览器幕后揭秘
    jQuery源码分析系列(38) : 队列操作
    正则表达式30分钟入门教程
    jQuery源码分析系列(37) : Ajax 总结
    jQuery源码分析系列(36) : Ajax
    jQuery源码分析系列(35) : Ajax
    jQuery源码分析系列(34) : Ajax
  • 原文地址:https://www.cnblogs.com/duenyang/p/5862797.html
Copyright © 2011-2022 走看看