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

网络编程 JQuery插件Marquee.js实现无缝滚动效果 06-22

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   // 滚动完了回调函数 
}

详细代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>marquee测试</title> 
<script type="text/javascript" src="../../jquery/jquery.js"></script> 
<script type="text/javascript" src="../marquee/lib/jquery.marquee.js"></script> 
<script type="text/javascript"> 
 $(function(){  
   $("#marquee").marquee({ 
   yScroll: "bottom", 
   showSpeed: 850,  // 初始下拉速度   , 
   scrollSpeed: 12,  // 滚动速度   , 
   pauseSpeed: 500,  // 滚动完到下一条的间隔时间   , 
   pauseOnHover: true, // 鼠标滑向文字时是否停止滚动   , 
   loop: -1 ,    // 设置循环滚动次数 （-1为无限循环）   , 
   fxEasingShow: "swing" , // 缓冲效果   , 
   fxEasingScroll: "linear", // 缓冲效果   , 
   cssShowing: "marquee-showing" //定义class 
 
   }); 
 }); 
</script> 
 
<style> 
 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 
 } 
</style> 
 
</head> 
 
<body > 
 
 
<ul id="marquee" class="marquee">   
<li><a href="#" target="_blank">WEB前端开发</a> [2011-10-20]</li>   
<li><a href="#" target="_blank">架构设计</a> [2011-09-20]</li>   
<li><a href="#" target="_blank">系统运维</a> [2011-10-16]</li>  
</ul> 
 
</body> 
</html>

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

jQuery siblings()用法实例详解
siblings()获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。jQuery的遍历方法siblings()$("给定元素").siblings(".selected")其作用是筛选给定的同胞

无需 Flash 使用 jQuery 复制文字到剪贴板
如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案，最可能的结果就是使用Flash的方案来做这个事，虽然使用Flash可以很好地解决这

50 个 jQuery 插件可将你的网站带到另外一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化（甚至不能以小时为计），随着其边界的扩展取得了许多新发展。在这些进步之中，开

编辑：一起学习网

标签：效果,函数,速度,回调,鼠标