如何在整个屏幕上跟随jQuery动画div?

问题描述

我正在使用 jQuery.crSpline 沿弯曲路径为图形设置动画.我对结果很满意.

I'm using jQuery.crSpline to animate a graphic along a curved path. I'm pretty happy with the result.

但是，整个画布的尺寸故意要宽得多-绝对比大多数屏幕要大-因此图形将很快用尽视口空间并在屏幕外产生动画.

However, the full canvas size is intentionally pretty wide - definitely larger than most screens - so the graphic will run out of viewport space pretty quickly and animate off the screen.

相反，我希望浏览器视口跟随图像或在图像上居中，以使其保持处于拍摄状态".

Instead, I'd like browser viewport to follow or centre on the image so that it stays 'in shot'.

我该如何使用jQuery?可以选择scrollTop吗?

How would I go about this with jQuery? Is scrollTop an option?

我基于 jsFiddle演示. ijin.net/crSpline/demo.html"rel =" nofollow noreferrer> crSpline演示源，但是具有广泛的minX设置.

I've created a jsFiddle demo, based on the crSpline demo source, but with a wide minX setting.

NB :我首先尝试使用YUI3进行尝试，并且 Loktar 提供了基于画布的解决方案，但是我没有使用YUI&帆布了.

NB: I did first attempt this with YUI3 and Loktar offered a canvas based solution, however I'm not using YUI & canvas any longer.

推荐答案

jQuery animate中的step函数存在一个选项，该选项可在动画的每个步骤上运行.

There exists an option for step function in jQuery animate,which is run on every step of the animation.

在此处查看功能参数的第二版: http://api.jquery.com/animate/

See second version of function parameters here :http://api.jquery.com/animate/

.animate( properties, options )

propertiesA map of CSS properties that the animation will move toward.

optionsA map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

根据您的代码查看此小提琴，该代码调用step函数来调整视口:

See this fiddle based on your code, which calls step function to adjust viewport :

http://jsfiddle.net/gNdwD/35/

$('<div id="mover" />')
        .appendTo($(document.body))
        .animate({ crSpline: spline },{
            duration: 20000,
            step: function() {       /* THE STEP FUNCTION TO ADJUST VIEWPORT */
              var mover = $('#mover'),
              posX = mover.position().left;
              posY = mover.position().top;

              $(window)
              .scrollLeft(posX - $(window).width() / 2)
               .scrollTop(posY - $(window).height() / 2);
            } ,
            complete:function () {
                      // Re-run the demo with a new spline after we're done
                       window.setTimeout(function() {
                       DEMO.run();
                      }, 5000);
            }
        });

这篇关于如何在整个屏幕上跟随jQuery动画div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！