jQuery实现列表自动滚动循环滚动显示新闻

它需要在页面的一个小范围内滚动显示新闻、公告、活动、图片等,悬停时停止悬停,离开后提示继续滚动。

设计素描 uff1a



干品

HTML:

复制代码代码如下所示:





aaaaaaaaaaaaaaa

bbbbbbbbbbbbbbb

ccccccccccccccc

ddddddddddddddd

eeeeeeeeeeeeeee

fffffffffffffff

ggggggggggggggg







Css:

复制代码代码如下所示:

用户界面,李{

列表样式:无;

}

#新闻{

身高:75px;

溢出:隐藏;

}



关键是js文件:

复制代码代码如下所示:

$(函数(){())

var =美元美元(#新闻);

无功scrolltimer;

this.hover美元(函数(){()

ClearInterval(scrolltimer);

}函数(){()

scrolltimer = setInterval(){()函数(

scrollnews(美元);

},2000);

})。Trigger(MouseLeave );

功能scrollnews(obj){

VaR自obj.find美元(UL);

VaR lineheight = self.find美元(李:第一)Height();

self.animate美元({

margintop :-PXlineheight +

},600,(){()函数

self.css美元({

margintop:0

})。找到(李:第一)。AppendTo($自);

})

}

})



主要用于悬停,setInterval,这样,使这些方法的性能和margintop(marginleft,顶部、左等)的理解和使用,需要注意的是,如果不是。触发(MouseLeave ),滚动列表将不会在初始化,和appendto可以直接将这些元素。