JQuery插件Marquee.js实现无缝滚动效果

Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。

{   
yScroll: "top"  // 初始滚动方向 (还可以是"top" 或 "bottom") 
showSpeed: 850  // 初始下拉速度
scrollSpeed: 12  // 滚动速度   ,
pauseSpeed: 5000  // 滚动完到下一条的间隔时间  
pauseOnHover: true // 鼠标滑向文字时是否停止滚动  
loop: -1    // 设置循环滚动次数 （-1为无限循环） 
fxEasingShow: "swing" // 缓冲效果  
fxEasingScroll: "linear" // 缓冲效果  
cssShowing: "marquee-showing" //定义class //
event handlers  
init: null    // 初始调用函数  
beforeshow: null   // 滚动前回调函数  
show: null     // 当新的滚动内容显示时回调函数  
aftershow: null   // 滚动完了回调函数 
}

详细代码：

lt;!DOCTYPE htmlgt; 
lt;htmlgt; 
lt;headgt; 
lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /gt; 
lt;titlegt;marquee测试lt;/titlegt; 
lt;script type="text/javascript" src="../../jquery/jquery.js"gt;lt;/scriptgt; 
lt;script type="text/javascript" src="../marquee/lib/jquery.marquee.js"gt;lt;/scriptgt; 
lt;script type="text/javascript"gt; 
 $(function(){  
   $("#marquee").marquee({ 
   yScroll: "bottom", 
   showSpeed: 850,  // 初始下拉速度   , 
   scrollSpeed: 12,  // 滚动速度   , 
   pauseSpeed: 500,  // 滚动完到下一条的间隔时间   , 
   pauseOnHover: true, // 鼠标滑向文字时是否停止滚动   , 
   loop: -1 ,    // 设置循环滚动次数 （-1为无限循环）   , 
   fxEasingShow: "swing" , // 缓冲效果   , 
   fxEasingScroll: "linear", // 缓冲效果   , 
   cssShowing: "marquee-showing" //定义class 
 
   }); 
 }); 
lt;/scriptgt; 
 
lt;stylegt; 
 ul.marquee { 
  display: block; 
  line-height: 1; 
  position: relative; 
  overflow: hidden; 
  width: 400px; 
  height: 22px; 
 } 
 ul.marquee li { 
  position: absolute; 
  top: -999em; 
  left: 0; 
  display: block; 
  white-space: nowrap; 
  padding: 3px 5px; 
  text-indent:0.8em 
 } 
lt;/stylegt; 
 
lt;/headgt; 
 
lt;body gt; 
 
 
lt;ul id="marquee" class="marquee"gt;   
lt;ligt;lt;a href="#" target="_blank"gt;WEB前端开发lt;/agt; [2011-10-20]lt;/ligt;   
lt;ligt;lt;a href="#" target="_blank"gt;架构设计lt;/agt; [2011-09-20]lt;/ligt;   
lt;ligt;lt;a href="#" target="_blank"gt;系统运维lt;/agt; [2011-10-16]lt;/ligt;  
lt;/ulgt; 
 
lt;/bodygt; 
lt;/htmlgt; 

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!