0

私は4つの画像とスライダーを持っています：

[image1.jpg]----[image2.jpg]----[image3.jpg]----[image4.jpg]
-----------------------------[Slider]-----------------------

スライダーをクリックしてドラッグすると、位置1と2の間にある場合、画像1と2は50％の透明度に設定され、スライダーが位置2に達すると、画像2は100％不透明になり、画像1は100になります。 ％ トランスペアレント。次に、位置2から3にスライドすると、画像2は90％、画像3は10％、次の位置の画像2は80％、画像3は20％などになります。スライダーが位置3になり、画像3が完全に表示され、画像が表示されるようになります。 2は100％透明です。

それは可能ですか？配列を使用しますか、それともスライダーのX位置を取得し、それに応じて画像の透明度を調整しますか？

4

3 に答える 3

1

これが私の試みです：小さなリンク。jQueryを使用しますが、プラグインは使用しません（そして、プレーンJavaScriptを使用して作成することもできると思います）。

コードはかなり自明ですが、JavaScript部分のコメント付きバージョンは次のとおりです。

$(".slider").scroll(function() {
   var imgs = $(".slider img"); //find all images in the slider
    imgs.each(function() { //for each of them
        var cur = $(this); //save the current image in cur
        var lft = cur.offset().left; //find out its left offset
        if(lft <= 0) { //if it's been scrolled past (its offset is negative)
            cur.css({opacity: Math.max(0, (300 + lft) / 300)}); //then set its opacity to a value proportional to its left offset
        }
        else {
            cur.css({opacity: Math.min(1, (500 - lft) / 500)}); //it's not scrolled past yet; set its opacity appropriately
        }
    });
});

お役に立てば幸いです。

于 2012-08-31T09:45:26.657 に答える
0

jQuery UIスライダーをチェックしてください。画像をスライドさせる（divを使用する）など、多くの機能があります。

于 2012-08-31T09:14:54.840 に答える
0

これは、UIスライダーで100％可能です。jQueryのUIスライダーを見てみましょう。これは、彼らがそれを使って絶えず色を変える方法の例です：

スライダーデモ

違いはありますが、一般的な考え方は同じです。スライダーの値が変わるので、画像の不透明度に合わせて調整する必要があります。あなたが持っていた後者のアイデア（「スライダーのX位置を取得し、それに応じて画像の透明度を調整しますか？」）は、問題に取り組むための本当に良い方法だと思います。おそらく、0がimage1で100％表示されるように設定でき、25がimage2で100％表示されるように設定できます。ブレーンストーミングについてさらにサポートが必要な場合は、お知らせください：]

于 2012-08-31T09:20:38.080 に答える