Question

所以我在这里使用这个演示插件http://tympanus.net/Tutorials/PrettySimpleContentSlider/并试图获得右侧的动画标签（ul id =“rotmenu”），以便能够自由浮动并在其主要部分之外自由定位div类“旋转器”，仍然保持其功能并在旋转器中发挥作用。我试图在这里和那里使用div和类的属性进行一些简单的更改，但它们或多或少地搞砸了。有任何想法吗？

好的，这是使用jquery_easing.1.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>

Answer 1

首先，它听起来像你想的那样，因为rotmenu是旋转器类的一部分，你需要在它之外设置旋转器类。这不是班级的运作方式。如果你想让rotmenu成为那个班级的一员。如果不是这样，那么忽略这部分信息。

它的结构方式是你的无序列表被一些不可见的div包裹。搞砸了我不明白你的意思。但由于它的类，它可能与该包装div的某些css元素有关。

Answer 2

如果您希望它在其父级（.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

在类之外的类中定位元素

2 个答案: