-1

ユーザーが画像の位置に到達したときに画像にフェードイン効果をもたらすコードを何時間も検索しましたが、私のコードは引き続き部分的に機能するか、まったく機能しません。それを捨てているのは私のCSSの位置付けかもしれないと思っていますが、間違っている可能性があります。誰かが私のエラーを指摘できれば、これは間違いなく私を助けるだけでなく、同様の問題を抱えている他の人のために主題を解決するでしょう.

これが私が模倣しようとしているフィドルです（divではなく画像のみ）： http://jsfiddle.net/tcloninger/e5qaD/

上記のフィドル コードを自分の Web サイトに組み込むと、「hide me」クラスのすべての画像が、一度に 1 つずつ表示されるのではなく、一度にフェード インします。したがって、このフィドルを見つけて、要素の位置をより適切に検出できるかどうかを確認しました。 http://jsfiddle.net/moagrius/wN7ah/

これにより、画像がフェードインすることはまったくありませんでした。一緒に使用しようとしているコードの一部を次に示します。

.hideme クラスの場所を検出し、ウィンドウ内にあるときに不透明にするコード:

$(document).ready(function() {

$.fn.isOnScreen = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

$(window).scroll(function () {
    if($('.hideme').isOnScreen()){
        $('.hideme').animate({'opacity':'1'},500);
});

私のhtmlがどのように設定されているか、および.hidemeクラスがどこにあるかのdivの例:

<div id="two" class="page">
<img src="img/splithead.png" alt="divided attention" class="icons vandhcenter"/>
<div class="abs">
<img src="text/div2.png" alt="section two text" class="text hideme"/>     
</div>
</div>

問題が配置にある場合、ここに私の CSS の抜粋があります。

div.page
{
display:block;
height:100%;
position:relative;
width:100%;
}

img.icons
{
height:600px;
width:800px;
}

.vandhcenter 
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

img.text
{
float:left;
position:relative;
width:800px;
}

.hideme 
{
opacity:0;
}

このすべてがこのようなリストで混乱しているように見える場合は、ここに jsfiddle リンクがあるので、私のコードをすべて見ることができます。すべての画像ファイルをアップロードしたわけではないため、実際の出力はありませんが、コードが見やすいかもしれません。jsfiddle、ネット/uxB4D/

4

1 に答える 1

0

あなたが説明していることは、「遅延読み込み」のように聞こえます。これを行うプラグインはすでにかなりの数あります。例: http://www.appelsiini.net/projects/lazyload

于 2014-01-30T17:48:26.180 に答える