1

昨天，我有一个客户要求我从我在这里实现的无限轮播上的图像空间中删除标题：http ://www.nokkam.com/showcase.html并且由于堆栈溢出，我能够做到这一点.

现在，我被要求让字幕动画模仿图像的动画（从左到右，而不是从底部向上动画。是否值得修改这个脚本或者我应该放弃它并尝试找到一个更合适的我被要求的内容。我搜索了很多轮播插件，但似乎找不到以这种方式制作动画的插件。任何帮助或想法总是非常感谢。

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

以前的脚本

$(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'+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

4

0 回答 0