0

所以我在这里使用这个演示插件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>
4

2 回答 2

1

首先，这听起来像你想的那样，因为 rotmenu 是 rotator 类的一部分，你需要在它之外有 rotator 类。这不是课堂的运作方式。如果您希望 rotmenu 成为该课程的一部分，请执行 . 如果不是这种情况，则忽略这部分消息。

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

于 2013-02-09T00:31:03.323 回答
1

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

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

此外，为了继续屏蔽动画组件，您需要设置#rot1为溢出：隐藏并使其具有与公共父级相同的尺寸（.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

于 2013-02-09T00:35:22.357 回答