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可以直接将这些元素。