0

バックグラウンドで外部画像を読み込んでプレビュー読み込みgifを表示できるjqueryライブラリまたはプラグインはありますか?

また、現在の解像度よりもはるかに大きい画像を表示するためのスクロールバーもサポートする必要があります。

4

1 に答える 1

1

以前に jQuery Cycle Plugin を使用したことがあります。画像のプレビュー読み込みと画像のプリロードをサポートしています。それは多くの素晴らしい機能を備えています。高さ/幅を制御できるかどうかはわかりませんが、周囲の div に css オーバーフロー プロパティを配置すると思います。

たとえば、 http://jquery.malsup.com/cycle/basic.htmlで見つけることができる Basic Demo へのいくつかの小さな変更を使用します。

この場合、私が変更したのは CSS スタイルだけです :-)

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Cycle Plugin - Basic Demo</title>
    <style type="text/css">
        .slideshow { height: 160px; width: 160px; margin: auto; overflow: auto }
        .slideshow img { }
    </style>
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
        });
    </script>
</head>
<body>
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    </div>
</body>
</html>

ホームページで詳細を参照してください: http://jquery.malsup.com/cycle/

于 2012-06-24T20:36:36.033 に答える