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 を変更してoverflow: visible. その後、好き#rotmenuな場所に配置できます。

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

さらに、アニメーション化されたコンポーネントのマスキングを続行するには、#rot1overflow: 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

于 2013-02-09T00:35:22.357 に答える