jQuery動畫：在較小高度的div上移動圖像，使用overflow：隱藏

這是fiddle！

圖像應該向上移動，直到底邊到達div的底部，然後向下移動，直到頂邊到達父div的頂邊，以顯示它。

這必須使用不同大小的圖像。jQuery動畫：在較小高度的div上移動圖像，使用overflow：隱藏

HTML：

<div class="container"> 
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg /> 
</div>

CSS：

.container { 
    position:relative; 
    width:1100px; 
    height:480px; 
    overflow:hidden; 
    background-color:#000; 
} 
.image { 
    position:absolute; 
    max-width:100%; 
    min-width:100%;

}

的jQuery：

$(document).ready(function() { 
move(); 
}); 

function move() { 
$(".image").animate({ 
    bottom: "-=50%" 
}, 10000, 'linear', function() { 
    $(".image").animate({ 
     bottom: "+=50%" 
    }, 10000, 'linear', move); 
}); 
}

來源

2013-10-27 alex

那麼有什麼不工作！我的意思是你面臨什麼問題？ –

問題是我希望它只顯示圖像，從上到下。正如你可以在小提琴中看到的，父div的背景正在顯示。 – alex

像這樣的事情似乎工作：

$(document).ready(function() { 
    move(); 
}); 

function move() { 
    $img = $(".image"); 
    var i = new Image(); 
    i.src = $img.attr('src'); 

    var d = i.height - $('.container').height(); 

    $img.animate({ 
    bottom: "+="+d+'px' 
    }, 10000, 'linear', function() { 
    $img.animate({ 
     bottom: "-="+d+'px' 
    }, 10000, 'linear', move); 
    }); 
}

這是一個小鬼鬼祟祟的，它創建一個新的JavaScript圖像對象（非jquery）使用相同的src作爲選定的一個，並使用其自然高度來執行動畫。看起來，如果我們創建一個jQuery對象，它的高度是不一樣的，也許它需要連接到dom或類似的東西。

的jsfiddle：http://jsfiddle.net/VqzvR/8/

移動設置代碼中的move()功能之外將意味着HTTP GET（對於IMG SRC）將只執行一次：

$(document).ready(function() { 
    setupMove(); 
}); 

function setupMove() { 
    $img = $(".image"); 
    var i = new Image(); 
    i.src = $img.attr('src'); 

    var d = i.height - $('.container').height(); 

    function move() { 
    $img.animate({ 
     bottom: "+="+d+'px' 
    }, 10000, 'linear', function() { 
     $img.animate({ 
      bottom: "-="+d+'px' 
     }, 10000, 'linear', move); 
    }); 
    } 
    move(); 
}

這是你的效果正在尋找？

來源

2013-10-27 17:57:44

jQuery動畫：在較小高度的div上移動圖像，使用overflow：隱藏

回答

相關問題