1

ポートフォリオサイトを作っていて、中学時代の作品を載せたいのですが、区別できるようにラベルを付けたいです。

ギャラリーは、高さと幅が異なる小規模な画像の集まりで、わずかに回転しています。画像にカーソルを合わせると、通常のサイズに拡大します。

この画像の上半分が現在のもので、下半分が私が望むものです。

ラベルとその中の画像でスパンを作ってみましたがうまくいきませんでした。

ラベルのない私のコードは次のとおりです。

<html>
<head>

    <title>
        Gallery Test
    </title>

    <style>

        .gallery_img {
            -moz-transform: scale(0.3);
            -moz-transition: all 0.4s ease-in-out 0s;
            background-color: white;
            padding: 20px;
            -webkit-box-shadow:  1px 1px 10px 2px rgba(0, 0, 0, 0.5);
            box-shadow:  1px 1px 10px 2px rgba(0, 0, 0, 0.5);
            margin: -100px -195px;
            z-index: 1;
        }

        .gallery_img:hover {
            -moz-transform: scale(1) rotate(0deg) !important;
            z-index: 100;
        }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<head>

<body>

    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />

    <br />

    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />

    <script>

        $(document).ready(function() {
            $(".gallery_img").each(function() {
                var numLow = -7;
                var numHigh = 7;

                var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;

                var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

                $(this).css("-moz-transform","scale(0.3) rotate(" + numRand + "deg)");
            });
        });

    </script>

</body>

4

1 に答える 1

0

私が思いついた解決策は、メイン画像をcss背景として作成し、「TEEN」オーバーレイを実際の画像として使用することです。

オーバーレイ画像 ('TEEN') を実際の画像と同じサイズにする必要があります。

ここでコード化されます。私は最初のものを変更し、.altあなたに見せるためにクラスを与えました

http://jsfiddle.net/SbrBz/

于 2012-08-01T15:33:32.940 に答える