jquery - Jquery 無限カルーセルのキャプションの変更

Question

昨日、クライアントから、ここで実装した無限カルーセルの画像スペースからキャプションを削除するように依頼されました: http://www.nokkam.com/showcase.htmlスタックオーバーフローのおかげで、これを達成することができました。 .

現在、キャプションアニメーションを画像のアニメーションに似せて作成するように依頼されています (下から上にアニメーション化するのではなく、左から右にアニメーション化するのではなく)。このスクリプトを変更する価値があるでしょうか。私が求められているものに. 私はたくさんのカルーセルプラグインを検索しましたが、この方法でアニメーション化するものを見つけることができないようです. どんな助けやアイデアも常に大歓迎です.

同じページを設定し、アニメーションを制御するために「margin bottom」ではなく「left」を使用してスクリプトの正しいプロパティと思われるものを変更しようとしましたが、テキストホルダー全体が消えてしまいました。私は本当にここで動揺しています。アニメーションを制御していると思われる部分をスクリプト内に配置し、何が機能するのかを推測しましたが、これは失敗しました。

前のスクリプト

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
            var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
            $('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'.8'});
            showtext($('li:eq(1) p', obj).html());  


function showtext(t)
            {
                // the text will always be the text of the second list item (if it exists)
                if(t != null)
                {
                    $('#textholder'+randID).html(t).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();
                }
            }



function showminmax()
            {
                    if(!autopilot)
                    {
                        html = '<img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/assets/images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/assets/images/up.png" title="Maximize" alt="maximize" id="max" />';
                        html += '<img style="position:absolute;top:2px;right:6px;display:none;cursor:pointer" src="/assets/images/close.png" title="Close" alt="close" id="close" />';
                        $('#textholder'+randID).append(html);
                        $('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});});
                        $('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});});
                        $('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);});
                    }
            }


    // animate textholder out of frame
                $('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);

MY EDITED SCRIPT (一部の変数をやみくもに変更して悪化させた)

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;left:'+-imgWidth+$(obj).css('paddingLeft')+'"></div>');
            var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
            var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
            $('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'.8'});
            showtext($('li:eq(1) p', obj).html());


function showtext(t)
            {
                // the text will always be the text of the second list item (if it exists) .width(imgWidth-(correctTHWidth * 2))
                if(t != null)
                {
                    $('#textholder'+randID).html(t).animate({left:correctTHWidth}); // Raise textholder

                }
            }

// テキストホルダーをフレームの外にアニメーション化 $('#textholder'+randID).animate({left:(-imgWidth-(correctTHWidth * 2))+'px'},500);

進捗！！！
したがって、以下を編集することで、少なくともフレームからテキストホルダーをアニメーション化することができました! 今、新しいテキストホルダーをフレームにアニメーション化する方法を理解する必要があります...さらに何か知っている場合は助けてください.

// animate textholder out of frame
$('#textholder'+randID).animate({left:(-imgWidth)-(correctTHWidth * 2)+'px'},500);

さらに別の進捗状況の更新
盲目的な手探り (試行錯誤) を経て、アニメーションを少なくとも正しい方向に動かすことができました。テキストバーが左から入ってきて、アニメーションが同じ方向に戻るという問題が発生しています... これが私の最後のハードルです. 何がこれを引き起こす可能性があるかについて誰かが貢献した言葉を持っていれば、私はまだ大いに感謝しています.
以下のリンクでカオスが進行中です。前もって感謝します。

したがって、アニメーションのプロパティを変更し、「showminmax」関数を完全に削除した後も、適切に機能しないアニメーションがまだ残っています。これはあまりエキサイティングな質問ではないことはわかっていますが、私は本当に新鮮なアイデアで、髪を失い始めています. みんな、ありがとう。

私の新しい、さらに（わずかに）より機能的な例は、ここで見ることができます： http://www.nokkam.com/showcase2.html

jquery - Jquery 無限カルーセルのキャプションの変更

0 に答える 0

Related

Reference