Question

昨天，我有一个客户要求我从我在这里实现的无限旋转木马上的图像空间中删除标题：http://www.nokkam.com/showcase.html并且由于堆栈溢出，我能够完成此任务。

现在，我被要求让字幕动画模仿图像的动画（从左到右，而不是从底部向上动画。是否值得修改此脚本或者我应该放弃它并尝试查找一个更适合我被要求的东西。我已经搜索了大量的旋转木马插件，似乎找不到以这种方式动画的东西。任何帮助或想法总是非常感激。

我尝试设置相同的页面并使用“left”而不是“margin bottom”来修改脚本中我认为正确的属性以控制动画，但现在整个textholder已经消失。我真的在这里肆虐。我在脚本中找到了我认为控制动画的部分，并猜到了什么会使它们工作......这失败了。

PREVIOUS SCRIPT

$(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);

我的编辑脚本（盲目地改变了一些变量并使其变得更糟）

$(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设置为框架内的动画 $（'＃textholder'+ randID）.animate（{left：（ - imgWidth-（correctTHWidth * 2））+'px'}，500）;

PROGRESS !!!
因此，通过编辑以下内容，我至少可以完成框架中的textholder动画！现在我只需要弄清楚如何将新的textholder动画到框架中...如果你有进一步的了解，请提供帮助。

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

另一个进展更新
通过更多的盲目摸索（试验和错误），我设法让动画至少朝着正确的方向前进！我现在遇到了从左侧进入文本栏并向同一方向动画回来的问题......这是我的最后一个障碍。如果有人有任何关于哪些事情可能触发这一点的贡献，我仍然会非常感激 混乱正在下面的链接中进行。提前致谢。

所以，在更改了animate属性并完全摆脱“showminmax”函数之后......我仍然有一个无法正常运行的动画。我知道这不是一个非常令人兴奋的问题，但我真的很想念并开始失去头发。谢谢大家。

我可以在这里看到我的新的，甚至（稍微）更多功能的例子： http://www.nokkam.com/showcase2.html

Jquery无限旋转木马标题修改

0 个答案: