Question

我有这个动画，我希望图像根据鼠标在图像上的位置进行缩放和平移。

这适用于Chrome和Safari，但在Chrome中等待鼠标停止移动，然后再应用转换http://codepen.io/mhkeller/pen/ZbdGQb

如果我删除了400ms转换时间，那么转换会在Chrome http://codepen.io/mhkeller/pen/GpbJrY中的mousemove上正确更新

如果可能的话，我想保留过渡。我尝试添加backface-visibility: hidden;和translate3d(0,0,0)技巧，但它似乎无法正常工作。

HTML（玉石模板）

#pages
    .page
        img(src="https://raw.githubusercontent.com/ajam/pulp/master/imgs/pages/page-3.jpg")

CSS（成为前缀的手写笔）

.page
    width 250px
    img
      width 100%
      transition transform 400ms cubic-bezier(0,0,.2,1) // This works when

JS

function Scale(){

  function Normalizer(min, max){
    return function(val) {
      return (val - min) / (max - min);
    }
  }

  function Interpolater(min, max, clamp){
    return function(val) {
      val = min + (max - min) * val;
      return clamp ? Math.min(Math.max(val, min), max) : val;
    }
  }

  var domain = new Normalizer(0, 1);
  var range = new Interpolater(0, 1);
  var s = function(val){
    return range(domain(val));
  };
  s.domain = function(min, max){
    if (!arguments.length) return domain;
    domain = new Normalizer(min, max)
    return s
  };
  s.range = function(min, max, clamp){
    if (!arguments.length) return range;
    range = new Interpolater(min, max, clamp)
    return s
  };
  return s;

}


var settings =  {

    "desktopHoverZoomOptions": {
        "scale": 1.5, // How much you want it to zoom
        "fit": .96, // A value between 0 and 1. Defaults to 1. Set this to something around .96 if you want to cut off the edges a little bit, like in this demo. This setting is useful if you have white space around your panels
        "padding": .25 // A value between 0 and .5. Sometimes you don't want the mouse to have to reach the edge of the page to fully zoom. Setting this to something like .25 will mean you've reached the edge of the zoomed in image when you're within 25% of the page edge.
    }
}

$('#pages').on('mousemove', '.page', function(e){
    var scale_value = settings.desktopHoverZoomOptions.scale,
                fit         = settings.desktopHoverZoomOptions.fit*100,
                padding     = settings.desktopHoverZoomOptions.padding,
                $page       = $(this),
                $hover_img  = $page.find('img'),
                page_width  = $page.width(),
                page_height = $page.height(),
                adjusted_x  = e.pageX - $page.offset().left,
                adjusted_y  = e.pageY - $page.offset().top,
                x_perc      = adjusted_x / page_width,
                y_perc      = adjusted_y / page_height;

        var translate_percentage = fit*((page_width*scale_value - page_width)/2)/page_width;

        var scale =  new Scale().domain(1- padding, padding)
                                                        .range(-1*translate_percentage, translate_percentage, true);

        var scaled_x_perc = scale(x_perc),
                scaled_y_perc = scale(y_perc);

        $hover_img.css({
            'transform': 'translate('+scaled_x_perc+'%,'+scaled_y_perc+'%) scale('+scale_value+')'
        });


});

Answer 1

我通过将其更改为矩阵变换来修复它。不确定为什么会这样，但Chrome，FF和Safari会正确显示它。

cordova-plugin-file-transfer

在Chrome

1 个答案: