Question

我有一个简单的问题，我想在用户滚动页面时更改一张图片（制作三维图片的错觉）

第一种方法是每次都改变图像src（制作8张不同的图片），但是当我滚动时，我可以看到浏览器的延迟，效果并不好。

所以，我想创建一个单独的图像，anche在用户滚动时更改背景位置。

这很完美（当一切都被加载时），唯一的问题是当用户滚动时，每次背景位置改变时，浏览器重新加载图片。所以，等待将会很多。看起来像加载不同的图片，但它只是一个。

我不明白为什么，图片总是一样的，为什么会出现这个问题？有人知道另一种解决方案吗？

这是剧本：

    <script type="text/javascript">
 jQuery('.qty-cart-btn2').hide();
 jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)');

  require(['jquery', 'jquery/ui'], function($){ 


 jQuery(function(){
    jQuery(window).scroll(function(){

        if(jQuery(this).scrollTop() >= 30) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-264px'})

        }

        if(jQuery(this).scrollTop() >= 45) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-528px'})

        }

        if(jQuery(this).scrollTop() >= 60) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-792px'})
        }
                if(jQuery(this).scrollTop() >= 75) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1056px'})
        }
               if(jQuery(this).scrollTop() >= 90) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1320px'})
        }

               if(jQuery(this).scrollTop() >= 105) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1584px'});
        }

              if(jQuery(this).scrollTop() >= 120) {
            jQuery('#back-shoes')
                .css({'background-position-y':'-1848px'});
        }



    });
});
 });
</script>

非常感谢

Answer 1

使用IF条件大于和小于，如：

jQuery(function(){
jQuery(window).scroll(function(){
    var Scroll = jQuery(this).scrollTop();
    if(Scroll >= 30 && Scroll < 45){
        jQuery('#back-shoes').css({'background-position-y':'-264px'})

    }
});

}）;

Answer 2

I solved by this example:

<div id="rotator"></div>

$(function() {

    var rotator = $('#rotator');
    var container = $(document);
    var viewport = $(window);

    var images = 72;
    var imageHeight = 30000 / images;
    var scrollHeight = container.height() - viewport.height() + imageHeight;
    var step = images / scrollHeight;

    viewport.scroll(function(event) {

        var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
        rotator.css('background-position', x + 'px 0');

    });

body {
    height: 2000px;
}

#rotator {
    font-size: 416px;
    width: 1em;
    height: 1em;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}

http://jsfiddle.net/coma/sBTzG/13/

Thanks everyone

改变JavaScript中的位置背景，奇怪的问题

2 个答案: