关于用jQuery兑现效果
关于用jQuery实现效果
1、效果1:关于新闻信息文字上下切换
2、效果2:将模块展开和关闭
1、效果1:关于新闻信息文字上下切换
<div id="scrollNews"> <ul> <li> <span class="plin">July 12,2009 4:30 pm</span> AR Update: Rolling Stones concert canceled for July 22 in Los Angeles. </li> <li> <span class="plin">July 12,2009 4:30 pm</span> AR Update: Rolling Stones concert canceled for July 22 in Los Angeles. </li> </ul> </div>
/*AR new*/ $(function(){ var $this = $("#scrollNews"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 3000 ); }).trigger("mouseleave"); }); function scrollNews(obj){ var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); //获取行高 $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){ $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移动元素 }) }
2、效果2:将模块展开和关闭
/*模块展开和关闭*/ $(function(){ $(".module_up_down").toggle(function(){ var $self = $(this); $self.prev().slideToggle(600,function(){ $("img",$self).attr("src","images/up.gif"); }); },function(){ var $self = $(this); $self.prev().slideToggle(600,function(){ $("img",$self).attr("src","images/down.gif"); }); }) })