JQueryプラグインMarquee.jsでシームレスなスクロールを実現effect

JQueryプラグインMarquee.jsでシームレスなスクロールを実現effect_jquery

WBOY

リリース： 2016-05-16 15:03:52

オリジナル

1722 人が閲覧しました

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 プログラミングを学習する皆さんのお役に立てれば幸いです。