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 回答