jquery，将当前项移动到顶部_Jquery_Scroll

jquery，将当前项移动到顶部

jquery scroll

jquery，将当前项移动到顶部,jquery,scroll,Jquery,Scroll,我遇到的问题是，如果第四项有很长的描述，那么它会在#features（由于我的设计中有一个严格的高溢出：hidden）下面被截断我所希望的是有人会有一个建议，如何使当前选择的项目移动到顶部下面是一个示例url:forums.wuggawoo.co.uk/example.php，基本上它应该从项目1、项目2、项目3、项目4开始，项目1显示其描述。5秒钟后，顺序应该是项目2、项目3、项目4、项目1，项目2显示其描述。5秒钟后，顺序应该是项目3、项目4、项目1、项目2和项目3显示它的描述等等，我刚

我遇到的问题是，如果第四项有很长的描述，那么它会在#features（由于我的设计中有一个严格的高溢出：hidden）下面被截断

我所希望的是有人会有一个建议，如何使当前选择的项目移动到顶部

下面是一个示例url:forums.wuggawoo.co.uk/example.php，基本上它应该从项目1、项目2、项目3、项目4开始，项目1显示其描述。5秒钟后，顺序应该是项目2、项目3、项目4、项目1，项目2显示其描述。5秒钟后，顺序应该是项目3、项目4、项目1、项目2和项目3显示它的描述等等，我刚刚在我发布的链接上更新的代码，有点像这样，但出于某种原因，在前几个循环之后它会收到一条消息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/library/jquery/1.4.js"></script>
<script>

var Model = {}
 jQuery( function(){ Model.FeatureBar.init(jQuery('.features')) } );

Model.FeatureBar = {
        current:0,
        items:{},
        init: function init(options){

            var me = this;
            me.triggers = []
            me.slides = []
            this.container = jQuery('#features');

            jQuery('.feature').each(function(i){
                me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')}
                me.slides[i] = {image: jQuery(this).children('.feature-image')}
            });

            for(var i in this.slides){
                this.slides[i].image.hide();
                this.triggers[i].description.hide();
            }
            Model.FeatureBar.goToItem(0);
            setInterval(function(){Model.FeatureBar.next()},5000);
        },
        next: function next(){
            var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0;
            this.goToItem(i);
        },
        previous: function previous(){
            var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length;
            this.goToItem(i);
        },
        goToItem: function goToItem(i) {
            if (!this.slides[i]) {
                throw 'Slide out of range';
            }
            this.triggers[this.current].description.slideUp();
            this.triggers[i].description.slideDown();

            this.slides[this.current].image.hide();
            this.slides[i].image.show();

            this.current = i;
        },
}
</script>
</head>

<body>

<div id="features">
            <div class="feature current">
                        <div style="display: none;" class="feature-image">
                <a href="google.com"><img src="/design/images/miss.png"></a>
            </div>
            <h2 class="feature-title"><a href="google.com">Item 1</a></h2>
            <p style="display: none;" class="feature-description"><a href="google.com">Item 1 description</a></p>
        </div>

            <div class="feature">
                            <div class="movie-cover">
                    <a href="/movie/movie"><img src="/image2.png" alt="" title=""></a>
                </div>
                        <div style="display: block;" class="feature-image">
                <a href="/rude/movie"><img src="/images/Featured/rude.png"></a>
            </div>
            <h2 class="feature-title"><a href="/rude/movie">Item 2</a></h2>

            <p style="display: block;" class="feature-description"><a href="/rude/movie">Item 2 description</a></p>
        </div>
            <div class="feature">
                        <div style="display: none;" class="feature-image">
                <a href="/pis/movie"><img src="/image3.png"></a>
            </div>
            <h2 class="feature-title"><a href="/pis/movie">Item 3</a></h2>
            <p style="display: none;" class="feature-description"><a href="/pis/movie">Item 3 description</a></p>

        </div>
            <div class="feature">
                        <div style="display: none;" class="feature-image">
                <a href="what.com"><img src="/images/Featured/indie.png"></a>
            </div>
            <h2 class="feature-title"><a href="what.com">Item 4</a></h2>
            <p style="display: none;" class="feature-description"><a href="what.com">Item 4 description</a></p>

        </div>
    </div>


</body>
</html>


变量模型={}
jQuery（function（）{Model.FeatureBar.init（jQuery（'.features'））}）；
Model.FeatureBar={
电流：0，
项目：{}，
init：函数init（选项）{
var me=这个；
me.triggers=[]
me.slides=[]
this.container=jQuery（“#features”）；
jQuery（'.feature'）。每个（函数（i）{
me.triggers[i]={url:jQuery（this）.children（'.feature title a'）.href，title:jQuery（this）.children（'.feature title'），description:jQuery（this）.children（'.feature description'）}
me.slides[i]={image:jQuery（this.children（'.feature image'）}
});
for（本幻灯片中的变量i）{
this.slides[i].image.hide（）；
this.triggers[i].description.hide（）；
}
模型.FeatureBar.goToItem（0）；
setInterval（函数（）{Model.FeatureBar.next（）}，5000）；
},
next：函数next（）{
VarI=（this.current+11）？this.current-1:this.triggers.length；
这是goToItem（i）；
},
goToItem：函数goToItem（i）{
如果（！this.slides[i]）{
抛出“滑出范围”；
}
this.triggers[this.current].description.slideUp（）；
this.triggers[i].description.slideDown（）；
this.slides[this.current].image.hide（）；
this.slides[i].image.show（）；
该电流=i；
},
}

我建议您这样做：

$('.feature-description').each(function (i,n){
    var parent = $(n).closest('.feature');
    $(n).prependTo(parent);
});

这会将每个“功能描述”放在父项的开始/顶部。功能把代码放在哪里？这取决于你什么时候想换地方

如果你想把它放在页面加载上。然后把它放在yout init函数上

希望它能有所帮助，因为它在这里没有任何作用。如果我运行你的代码，我会得到以下错误：

ReferenceError:找不到变量：Model

。所以这里缺少一些东西。如果我们不能重现你的问题，很难提供帮助！你说的“它在特性下面时被切断”是什么意思好的，现在javascript正在运行，但我仍然不知道你所说的“它在功能下被切断”是什么意思也许你也应该提供一些css。因为如果我理解正确，这可能是一个设计问题。你会把它放在哪里？基本上是这样的：项目1开始，5秒后，项目2向上滚动，然后项目3，然后项目4。但是由于设计限制，框的高度切断了项目4s的描述。我所做的是uld-like是当前循环显示的项目，移动到顶部。您可能更容易将代码粘贴到html文件中，并将jquery 1.4的副本放入。您非常困惑，先生……您需要元素来移动位置吗？……或者您需要一种将项目向上滑动的效果吗？如果您在其他网站上看到过这种情况，那么我们已经看到了这是一个如何工作的想法。下面是一个url示例：基本上，它应该从项目1、项目2、项目3、项目4开始，项目1显示其说明。5秒钟后，顺序应该是项目2、项目3、项目4、项目1，项目2显示其说明。5秒钟后，顺序应该是项目3、项目4、项目1、项目2，项目3显示其说明ng它的描述等等，我刚刚在我发布的链接上更新的代码，有点像这样，但出于某种原因，在前几个循环之后它会收到一条消息