zoukankan      html  css  js  c++  java
  • 用鼠标滚动缩放图片

    用鼠标滚动缩放图片

    使用Javascript中的onmusewheel事件来的。兼容firefox、chrome等主流浏览器。

    function wheel(obj, fn, useCapture) {
            var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x  
            if (obj.attachEvent) //if IE (and Opera depending on user setting)  
                obj.attachEvent("on" + mousewheelevt, handler, useCapture);
            else if (obj.addEventListener) //WC3 browsers  
                obj.addEventListener(mousewheelevt, handler, useCapture);
              
            function handler(event) {
                var delta = 0;
                var event = window.event || event;
                var delta = event.detail ? -event.detail / 3 : event.wheelDelta / 120;
                if (event.preventDefault)
                    event.preventDefault();
                event.returnValue = false;
                return fn.apply(obj, [event, delta]);
            }
        }
        var count = 10;
        var slide_zoom = document.getElementById("slide_zoom");
        function zoom(delta) {
            if (delta >= 1)
                Resize(++count);
            else if (delta <= -1)
                Resize(--count);
        }
        function Resize(c) {
            slide_zoom.style.width = (c + 100) + '%';
            slide_zoom.style.height = (c + 100) + '%';
           }
        wheel(slide_zoom, function (e, delta) { zoom(delta) }, false);

  • 相关阅读:
    [POJ 1269]Intersecting Lines
    [POJ 3304]Segments
    [HNOI 2011]数学作业
    [UOJ 12]猜数
    [UOJ 282]长度测量鸡
    [HAOI 2007]理想的正方形
    [POJ 2318]TOYS
    [SDOI 2009]HH的项链
    [USACO 12DEC]Running Away From the Barn
    [HDU 2036]改革春风吹满地
  • 原文地址:https://www.cnblogs.com/dengxinglin/p/2954957.html
Copyright © 2011-2022 走看看