<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>
$(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");
});