2

我能够让对象在滚动时沿路径移动，但我希望添加功能以在滚动页面时沿路径拖动球。我没有尝试过任何工作，所以任何帮助将不胜感激。

对于任何想看到它的人来说，这是一个 jsfiddle。 http://jsfiddle.net/jaruesink/StD6X/

$(function() {
    Raphael("holder", 640, 480, function () {
        var r = this,
            p = r.path("M247.832,261.211c-19.408-10.846-33.492-47.748-41.123-66.572c-12.574-31.018-30.738-92.277-7.552-122.189c5.511,16.652,2.014,40.018,1.926,57.407c-0.27,52.703-6.908,101.25-15.773,153.008c-6.166,36-15.068,130.735-72.547,124.382c-6.258-12.716,13.125-24.068,20.445-31.353c39.967-39.779,84.457-79.047,115.439-126.593c27.893-42.807,46.109-101.534,49.13-152.602c2.344,7.983,1.338,20.379,1.142,29.666c-0.639,30.025-2.233,60.371-4.255,90.35c-2.612,38.754-15.235,77.743-15.627,116.299c-0.917-12.587,3.64-23.74,5.717-35.99c5.285-31.148,12.264-61.737,18.527-92.772c5.347-26.499,8.268-53.483,13.611-79.963c1.68-8.321,4.4-39.25,14.637-43.116c29.602-11.173,32.101,72.19,31.265,84.899c-0.989,15.104-17.456,63.116-42.325,54.414c-6.874-2.406-12.237-10.499-6.491-16.326c29.989,34.912,8.484,106.492,57.719,129.61c52.633,24.716,167.903-33.98,158.341-98.086").attr({stroke: "#666", opacity: .3, "stroke-width": 10}),
            len = p.getTotalLength(),
            e = r.circle(0, 0, 5).attr({stroke: "none", fill: "#fff"}).onAnimation(function () {
                var t = this.attr("transform");
            });
        r.customAttributes.along = function (v) {
            var point = p.getPointAtLength(v * len);
            return {
                transform: "t" + [point.x, point.y] + "r" + point.alpha
            };
        };
        e.attr({along: 0});



        var rotateAlongThePath = false;
        var offset = $('body').scrollTop();
        var bheight = $('html').height() - $(window).height();
        var bpercent = offset/bheight;
           e.attr({along:bpercent});  
    $(window).scroll(function() {
        function run() {
            var offset = $('body').scrollTop();
            var bheight = $('html').height() - $(window).height();
            var bpercent = offset/bheight;
           e.attr({along:bpercent});
        }
        run();
    });



  });
  });
4

0 回答 0