在类之外的类中定位元素

Positioning elements within Classes outside of class

本文关键字：定位 元素      更新时间：2023-09-26

所以我在这里使用这个演示插件http://tympanus.net/Tutorials/PrettySimpleContentSlider/我试图让右边的动画选项卡（ul id="rotmenu"）能够自由浮动，并在其主div类"rotor"之外自由定位，同时仍然保持其功能并在rotor中发挥作用。我试着用div和类的属性在这里和那里做一些简单的更改，但它们或多或少都把事情搞砸了。有什么想法吗？

这是使用jquery_easing1.3和jquery.min.js库的js

<script type="text/javascript">
        $(function() {
            var current = 1;
            var iterate     = function(){
                var i = parseInt(current+1);
                var lis = $('#rotmenu').children('li').size();
            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate,3000);
            $('#rotmenu li').bind('click',function(e){
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });
            function display(elem){
                var $this   = elem;
                var repeat  = false;
                if(current == parseInt($this.index() + 1))
                    repeat = true;
                if(!repeat)
                    $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                        $(this).animate({'opacity':'0.7'},700);
                    });
                current = parseInt($this.index() + 1);
                var elem = $('a',$this);
                    elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
                var info_elem = elem.next();
                $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                    $('h1',$(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({'left':'0px'},400,'easeInOutQuad');
                });
                $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                    $('p',$(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                })
                $('#rot1').prepend(
                $('<img/>',{
                    style   :   'opacity:0',
                    className : 'bg'
                }).load(
                function(){
                    $(this).animate({'opacity':'1'},600);
                    $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                        $(this).remove();
                    });
                }
              ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
            );
            }
        });
    </script>

应用jquery的

 <body>
    <div id="content">
        <a class="back" href=""></a>
        <div class="rotator">
            <ul id="rotmenu">
                <li>
                    <a href="rot1">Portfolio</a>
                    <div style="display:none;">
                        <div class="info_image">1.jpg</div>
                        <div class="info_heading">Our Works</div>
                        <div class="info_description">
                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot2">Services</a>
                    <div style="display:none;">
                        <div class="info_image">2.jpg</div>
                        <div class="info_heading">We serve</div>
                        <div class="info_description">
                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot3">Contact</a>
                    <div style="display:none;">
                        <div class="info_image">3.jpg</div>
                        <div class="info_heading">Get in touch</div>
                        <div class="info_description">
                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot4">Experiments</a>
                    <div style="display:none;">
                        <div class="info_image">4.jpg</div>
                        <div class="info_heading">We do crazy stuff</div>
                        <div class="info_description">
                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot5">Applications</a>
                    <div style="display:none;">
                        <div class="info_image">5.jpg</div>
                        <div class="info_heading">Working things</div>
                        <div class="info_description">
                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="rot1">
                <img src="" width="800" height="300" class="bg" alt=""/>
                <div class="heading">
                    <h1></h1>
                </div>
                <div class="description">
                    <p></p>
                </div>    
            </div>
        </div>
    </div>

如果希望它在其父级（.rotator）之外可见，则需要将父级的CSS更改为具有overflow: visible。然后，您可以将#rotmenu放置在任何您想要的位置。

#rotmenu {
    position: absolute;
    top: 300px;
    left: 100px;
    z-index: 10;
}    
.rotator {
    ...
    overflow:visible;
    ...
}

此外，为了继续遮罩动画组件，需要将#rot1设置为overflow：hidden，并使其具有与公共父级（.rotator）相同的尺寸。

#rot1 {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

最后，为了防止损坏的图像在DOM中收集（在本例中发生这种情况，因为我们不包括源图像），我在图像插入代码中添加了一个错误处理程序来删除图像。

$('#rot1').prepend(
$('<img/>', {
    style: 'opacity:0',
    className: 'bg'
}).error(function () {
    $(this).remove();
}).load(function () {
    $(this).animate({
        'opacity': '1'
    }, 600);
    $('#rot1 img:first').next().animate({
        'opacity': '0'
    }, 700, function () {
        $(this).remove();
    });
}).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300'));

jsfiddle

首先，在我看来，你认为因为rotmenu是rotor类的一部分，所以你需要在它之外有rotor类。这不是类的工作方式。如果你想让rotmenu成为这个类的一部分。如果不是这样，那么忽略消息的这一部分。

它的结构是，你的无序列表被一些看不见的div包裹着。我不知道你所说的混乱是什么意思。但是由于它的类，它可能与包装器div的一些css元素有关。

相关文章：