Question

我正在使用Swinxy Zoom插件在容器上方创建放大镜，其中包含动画内容，该内容将各种对象组合在背景上。我的问题是，插件的范围相当有限，不仅仅是放大单个图像。在黑客攻击插件Js后，我设法在放大镜周围插入一个包裹元素，以创建一个可以放置动画对象的舞台区域：

`<div class="viewport-outer">
   <!-- Custom artwork overlay for magnifying glass -->
   <img src="img/magnify.png" alt="magnify glass" class="magnify-glass">
     <div class="sxy-zoom-viewport">
       <!-- Container space for animated objects -->
       <div class="magnified-display"></div>
         <!-- Object for magnified image -->
         <img galleryimg="no" class="not-visible" />`

由于插件已经缩小，我无法确定哪个部分设置了图像和放大镜的左/上位置。因此我使用setInterval将左/顶部css值分别复制到'magnified-display'（偏移）和'magnify-glass'。

var interval1 = setInterval（magnifier，0）;

    $('a.magnify').swinxyzoom({
        mode:'lens',
        damping: 1,
        steps: '0',
    })

    setTimeout(function(){
        $('.magnifiedContent').appendTo('.magnified-display').each(function() {
            // code for animating appended objects here
        });
    },500)

    $('.sxy-zoom-container').mousemove(function(){
      if($('html').hasClass('.lt-ie9')) {
        $('.sxy-zoom-container').mousemove(function(){
            magnifier()
        })
      }
    })

    function magnifier(){
        $('.magnify-glass').animate({left:$('.sxy-zoom-viewport').css('left')},0)
        $('.magnify-glass').animate({top:$('.sxy-zoom-viewport').css('top')},0)
        $('.magnified-display').animate({left:$('.sxy-zoom-viewport').find('.not-visible').css('left')},0)
        $('.magnified-display').animate({top:$('.sxy-zoom-viewport').find('.not-visible').css('top')},0)
    }

这种方法很有效，但我认为应该在很短的时间内使用setInterval。

Swinxy放大图像，上面有动画对象

0 个答案: