Question

我在这里有些问题与我的js。

它的功能是正确的,但在某些情况中,性能太慢。

我轻轻地向下滚动,但当我试图再次滚动时,它会慢慢地滚动。

我能做些什么来提高业绩?

谢谢!

$(function(){

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;

// Scroll sets

var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);

$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);

// Set mask w and h

$("#mask").css("width", windowWidth);
$("#mask").css("height", windowHeight);
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

$("#content section").each(function() {

    // Defines its width and height

    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);

    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);

    sectionCount++;
});

// When window scrolls

$(window).scroll(function(){ 

    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;

    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing:  easeOutQuart });

    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing:  easeOutQuart });

    //{duration: 1500, easing:  easeOutQuart }
    });
});

Answer 1

您没有在动画( 并反复使用 $ (this) 或 $ (# # mask ) 中隐藏选择器是浪费的), 所以每次用户滚动时, 它都会为 # content, # illuspion1 / 搜索整个 dom / # content, # illuspion1 。此外, 滚动动动画有点多余, 因为滚动本身是一种“ 动画 ” 。固定定位是理想的, 但只要在每卷轴上设置 CSS 样式, 就能达到同样的效果。只要在每一个滚动事件上不使用动画即可。另外, 您不为左上提供 px, 从而避免了通过预置“ - + ” 将“ 嵌入字符串的需要。尝试重写 $( window) 。 scroll 函数像这样 :

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+ px , top: (-curScrollTop)+ px  });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+ px , top: (-curScrollTop*0.5)+ px  });
});

如果您的心脏被设置在动画效果上, 请考虑一种脱落/ 脱落方法。与其在每一个滚动事件上动画, 不如使用 : “ 超时 = 设定超时( 函数( { { { } } 、 25) ”, 当超时被允许过期时, 将执行动画, 并在滚动时简单清除超时( 超时) 并再次设定超时。动画不会是实时的, 除非用户停止滚动 25 ms, 否则它永远不会执行。

Answer 2

无法肯定这是否有用, 但当我需要移动一个元素与滚动中的浏览器窗口相对时, 我使用某种形式的固定定位。我发现这比试图设置或动画抵消绝对或相对定位元素的功能在Chrome和其他浏览器中表现更好。也许您可以跳出一个 < a href=" "http://jsfiddle. net/ " rel="nofollow" >jsfidle , 说明您试图实现的效果, 我可以提供一些进一步的建议。

如果你能提供一些 HTML 来代替一个也会有帮助的旋律的话。

Answer 3

我要说把整包都改成TweenLite, 它比 JQuery 更顺畅地运行动画。

http://www.greensock.com/v12/" rel="no follow">http://www.greensock.com/v12/

您可以比较下面的差异。

http://www.greensock.com/js/speace.html

友情链接