|
此例子也是根据人家修改的 呵呵
公共的css
<style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:800px;height:100px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}</style>
公共的html
<div id="scrollDiv"><ul id="scroll-container" style="margin-top: 0px;"> <li>1 clone()克隆匹配的DOM元素并且选中这些克隆的副.</li> <li>2 appendTo()把所有匹配的元素追加到另一个、指定的元素元素集合中。</li> <li>3 eq()减少匹配对象到一个单独得dom元素.</li> <li>4 fadeIn()通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数.</li> <li>5 fadeOut()能过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数.</li> <li>6 parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选.</li> <li>7 show()以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数.</li> </ul></div>
1.淡入淡出
jQuery(function ($) {//对于横向的时候 如果出现多个时候会使用$('#scroll-container li').each(function(index,domEl){if(index >=4)$(domEl).hide() ;});setInterval('scroll_news()',2000);}); function scroll_news(){var $firstNode = $('#scroll-container li'); $firstNode.eq(0).fadeOut('slow',function(){ $(this).clone().appendTo($(this).parent()).hide();$(this).remove();$firstNode.eq(4).fadeIn('slow');}); }
2.滑动
var runTime ;jQuery(function ($) {runTime = setInterval('scroll_news()',2000);$("#scrollDiv").mouseover(function(){ clearInterval(runTime);}); $("#scrollDiv").mouseout(function(){ runTime = setInterval('scroll_news()',2000);}); });function scroll_news(){ $("#scrollDiv").find("ul:first").animate({marginTop:"-25px"},1000,function(){$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } |
|