zoukankan      html  css  js  c++  java
  • 图片放大缩小(兼容火狐)

        //DOMMouseScroll forfix的鼠标滚轮事件,mousewheel常规滚轮事件
          //imgParent是图片父级元素,在图片父级上触发事件,避免鼠标不在图片上时无法放大/缩小
          imgParent.on('mousewheel DOMMouseScroll', zoomImg);
    
          function zoomImg(event) {
            var img = $(this).children('img');
            var event = event || window.event;
            event.preventDefault();
            //判断鼠标是向上滚动还是向下滚动
         //event.detail是forfix浏览器,向上滚动为-3,其他浏览器相反
    var dir = (event.originalEvent.wheelDelta) > 0 || (event.detail < 0 ) ? 'Up' : 'Down'; var width = img.css('width'); var num =parseInt(width);//将宽度提取出来 //if (dir == 'Up') { // num += num * .25; // img.css('width', num);//重新给宽度赋值 // } else { // num -= num / 4; // img.css('width', num); // }

          

             dir == 'Up' ? num += num * .25 : num -= num / 4;
             img.css('width', num);

    
          };

    未经本人同意,请勿转载。如有错误之处,烦请不吝赐教!

     

  • 相关阅读:
    css定位
    表格常见属性
    细说Ajax--异步请求
    DOM事件与jQuery事件的是非纠葛
    简单特效-切换背景图片
    javascript之--offset家族
    javascript高级特性
    参数的传递
    javascript中函数浅析
    初识Javascript
  • 原文地址:https://www.cnblogs.com/duanfuying/p/8126893.html
Copyright © 2011-2022 走看看