个人中心
gpt4 book ai didi

jquery - CSS绝对定位导致元素在不需要时堆叠

转载 作者：行者123 更新时间：2023-11-28 14:12:36 24 4
gpt4 key购买 nike

我使用 CSS3 和 JQuery 组合了一个简单的照片堆栈。它工作得很好，但有一个主要问题。该网站需要显示多个堆栈，由于堆栈用于在网站上显示“照片库”，因此数量无法预测，显然画廊越多，堆栈就越多。

如果没有堆栈，这很简单，只需回显一个带有从数据库检索的 src 的标签。这在使用堆栈时仍然很简单，因为唯一的区别是一小段 CSS 和 JQuery。

现在对于这个问题，我已经使用绝对定位来允许堆栈中的三个图像是错误的，堆叠的。这很好，但是现在当堆栈被回显时，它正在堆叠堆栈，Urgh!所以我最终得到的是一大堆图像，而不是一张三张图像上的单独堆栈。

这是代码。

<html>
<head>

    <style type="text/css">

        #content {
            margin: 0 auto;
            width:  1024px;
        }

        #viewAlbumTitle {
            font-size: 20px;

        }

        #grid {

            line-height:          0;
            -webkit-column-count: 4;
            -webkit-column-gap:   10px;
            -moz-column-count:    4;
            -moz-column-gap:      10px;
            column-count:         4;
            column-gap:           10px;
        }

        #grid img {
            width:         100% !important;
            height:        auto !important;
            margin-bottom: 10px;
            padding:       5px;
            cursor:        pointer;
        }

        @media (max-width: 480px) {

            #grid {
                -moz-column-count:    2;
                -webkit-column-count: 2;
                column-count:         2;
            }
        }

        @media (max-width: 320px) {
            #grid {
                -moz-column-count:    1;
                -webkit-column-count: 1;
                column-count:         1;
            }
        }

        .pv-div {
            padding: 0 0 4px 0;
        }

        .pv-link {
            font-size:       15px;
            color:           #000;
            text-decoration: none;
        }

        .pv-link:hover {
            text-decoration: underline;
        }

        .thumb-over:hover {

        }

            /* image stsck */

        .image_stack {
            position: absolute;
        }

        .image_stack img {
            position:           absolute;
            border:             4px solid #FFF;
            box-shadow:         2px 2px 8px rgba(0, 0, 0, 0.5);
            -moz-box-shadow:    2px 2px 8px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            z-index:            9999;
            -moz-transition:    all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            -o-transition:      all 0.2s ease;
            transition:         all 0.2s ease;
        }

        .image_stack #photo1 {
            top:  8px;
            left: 108px;
        }

        .image_stack #photo2 {
            top:  6px;
            left: 104px;
        }

        .image_stack #photo3 {
            top:   4px;
            left:  100px;
            right: 100px;
        }

        .image_stack .rotate1 {
            -webkit-transform: rotate(15deg);
            -moz-transform:    rotate(15deg);
            transform:         rotate(15deg);
            -ms-transform:     rotate(15deg);
            -o-transform:      rotate(15deg);
        }

        .image_stack .rotate2 {
            -webkit-transform: rotate(0deg);
            -moz-transform:    rotate(0deg);
            transform:         rotate(0deg);
            -ms-transform:     rotate(0deg);
            -o-transform:      rotate(0deg);
        }

        .image_stack .rotate3 {
            -webkit-transform: rotate(-15deg);
            -moz-transform:    rotate(-15deg);
            transform:         rotate(-15deg);
            -ms-transform:     rotate(-15deg);
            -o-transform:      rotate(-15deg);
            cursor:            pointer;
        }

        .stack_wrap {
            margin-left: -100px;

        }


    </style>

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


        $(document).ready(function () {
            $(".image_stack").delegate('img', 'mouseenter', function () {
                if ($(this).hasClass('stackphotos')) {//


                    var $parent = $(this).parent();
                    $parent.find('img#photo1').addClass('rotate1');
                    $parent.find('img#photo2').addClass('rotate2');
                    $parent.find('img#photo3').addClass('rotate3');
                    $parent.find('img#photo1').css("left", "150px");
                    $parent.find('img#photo3').css("left", "50px");


                }
            })
                .delegate('img', 'mouseleave', function () {
                    $('img#photo1').removeClass('rotate1');
                    $('img#photo2').removeClass('rotate2');
                    $('img#photo3').removeClass('rotate3');
                    $('img#photo1').css("left", "");
                    $('img#photo3').css("left", "");

                });
            ;
        });

    </script>

</head>
<body>

<!-- header -->
{include file="header.tpl"}
<!-- header end -->

<div id="content">

    <div style="margin:42px 0 0 -15px;">

        <div style="float:left; width:192px; padding:30px 24px 0 0;">
            <div>
                <span style="font-size:20px;">Username's photos</span>

                <div style="padding:10px 0 10px 0;"><img src="img/avatar.png" width="192"/></div>
                <div class="pv-div"><a class="pv-link" href="">Edit photo's</a></div>
                <div class="pv-div"><a class="pv-link" href="">Edit album</a></div>
                <div class="pv-div"><a class="pv-link" href="">Delete</a></div>
            </div>


        </div>


        <div style="float:left; border-left:1px solid #ebebeb; width:795px; min-height:400px; padding:32px 0 0 24px;">
            <!--<span>You currently have no pictures, why not upload some now?</span>-->

            <div>
                <span id="viewAlbumTitle">Username's photo albums</span>

                <div style="float:right"><a href="" class="main-button" onClick=('popUpload') style="margin:0;">upload
                    new pics</a></div>
            </div>

            <div style="margin:20px 0 0 0"></div>

            <div>

                <div style="margin:10px 0 0 0"></div>

                <div id="grid">

                    <div class="stack_wrap" style="float:left;">
                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>

                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>
                    </div>


                </div>


            </div>
        </div>
    </div>

    <div style="width:100%; padding:10px 0 20px 0;">

    </div>

</body>
</html>
​

如果有人能帮助我，我将不胜感激。

提前致谢。

杰米

最佳答案

设置第二个栈顶的位置。

<div class="image_stack" style="postion:relative;top:200px">

关于jquery - CSS绝对定位导致元素在不需要时堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9313153/

24 4 0
文章推荐： swift - 如何创建增量数字字符串？
文章推荐： swift - 编写 BOM 以在 Swift 中流式传输
文章推荐： swift - 我是否正确使用 Storyboard？
文章推荐： asp.net - 在 asp.net 中开发页面时 IE 9 和 8 中的 CSS 设计问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com