基于jquery模仿新浪微博的无狭缝滚动

<div>

<ul>

<li>1</li>

<li>2</li>

</ul>

</div>

实现思想：1.内容的持续滚动；

通过设置ul的position;relative;我的实验中用了，position:absolute;top:0也能达到此效果，但这两种方法有什么差异目前，还未清除；给人的感觉就是除了第一个li之外，其他的li是一起滚动的；

2.新浪微博的内容是通过上面的内容，把下面的内容推下去，最后一个又重新跑到第一个内容处；

让最后的li元素定时插入第一个li元素的上方，然后采用animate方法来改变li的高度和透明效果。而不停顿的滚动依然要用到setTimeout方法。在没有新数据加载的情况下，要实现有限内容循环滚动。

3.鼠标移动到内容区是，内容stop,离开后又继续滚动；

实现此功能又很多方法：可以通过mouseover(),mouseout()事件，hover(function(),function())事件；可以当鼠标hover经过的时候在某元素上加上某属性的值，这里采用name属性——判断此值是否存在，如果存在则不执行代码。

4.容器的底部添加渐变的透明背景，实现内容的渐渐消失的效果；

可以通过在内容上覆盖渐变的png24图片来实现，IE6对png24支持不好，如果需要顾及性能的话，在此容器上加display:none的IE6hack。接下来的问题是解决图片覆盖到文字之上，文字如何可以点击或选中的问题，这时候需要一个特殊的css属性“pointer-events”，此属性的值设为none之后，鼠标就可以透过绝对定位在文字上的图片选中下面的文字。也可以通过css("opacity","0");0-1之间；边框的阴影效果可以用一下代码实现，http://www.css88.com/tool/css3Preview/Text-Shadow.html

html代码：

<div id="run">
<ul style="position:relative">
<li><a href="#"><img src="2.jpg"></a>
<p>1内容持续滚动，此功能使用css的position定位来控制整个ul列表的移动动画。</p></li>
<li><a><img src="2.jpg"></a><p>2 新微博将下面的微博先推下去,然后淡入进来让最后的li元素定时插入第一个li元素的上方，然后采用animate方法来改变li的高度和透明效果。而不停顿的滚动依然要用到setTimeout方法。在没有新数据加载的情况下，要实现有限内容循环滚动。 </p></li>
<li><a><img src="2.jpg"></a>
<p>3 鼠标经过内容暂停滚动鼠标经过暂停的需求可以当鼠标hover经过的时候</p></li>
<li><a><img src="2.jpg"></a><p>4 容器底部渐变消失在背景色下</p></li>
</ul>
<div id="cover" style="z-index:3"></div>
</div>

css样式代码；

<style type="text/css">
ul{
list-style-type:none;
}
#run{
width:400px;
height:400px;
border:1px #666 solid;
background-color:#FFFFFF;
position:relative;
margin:10px auto;
overflow:hidden;
}
#run ul
{
position:absolute;
top:0px;
left:0px;
margin:10px;
padding:0px;
}
#run ul li{
width:100%;
border-bottom:1px dotted #333333;
overflow:hidden;
padding:20px 0;
color:gray;
display:list-item;
}
#run ul li a{
float:left;
border:1px #333333 solid;
cursor:pointer;
}
#run ul li a img{
display:inline;
}
#run ul li p{margin-left:68px;border:1px solid red;margin-top:0px;padding:0px;}
#run #cover{
position:absolute;
bottom:0px;
width:100%;
height:35px;
background:#ffffff;
pointer-events:none;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
</style>

View Code

$(document).ready(function(){
$("#cover").css("opacity",0.5);
var timeid;
$("#run").hover(function(){clearInterval(timeid);},

function(){
timeid=setInterval(function(){
var ul=$("#run ul");
var liheight=ul.find("li:last").height();
//alert(liheight);//出现间断可能是top的高度不够；
ul.animate({"top":liheight+40+"px"},1000,function(){
ul.find("li:last").prependTo(ul);
ul.find("li:first").hide();
ul.css("top",0);
ul.find("li:first").fadeIn(1000);
});

},3000)

}).trigger("mouseleave");

});