首先，来说明一下，这个“多功能”无缝滚动插件，到底怎么“多功能”？marquee.js 插件一共提供了 19 个可选的配置参数，是我所能想到的一般无缝滚动所可能涉及到的多样化了。简单来看一下这些参数有：
查看源代码打印帮助
auto: true // 是否自动滚动
interval: 3000 // 间隔时间（毫秒）
direction: 'forward' // 向前 - forward / 向后 - backward
speed: 500 // 移动速度（毫秒）
showNum: 1 // 显示个数
stepLen: 1 // 每次滚动步长
type: 'horizontal' // 水平滚动 - horizontal / 垂直滚动 - vertical
prevElement: null // 上一组按钮元素
prevBefore: function() {} // 上一组移动前回调
prevAfter: function() {} // 上一组移动后回调
nextElement: null // 下一组按钮元素
nextBefore: function() {} // 下一组移动前回调
nextAfter: function() {} // 下一组移动后回调
pauseElement: null // 暂停按钮元素
pauseBefore: function() {} // 暂停前回调
pauseAfter: function() {} // 暂停后回调
resumeElement: null // 继续按钮元素
resumeBefore: function() {} // 继续前回调
resumeAfter: function() {} // 继续后回调
不过你也不需要被这么多的参数给吓到了，因为以上这些参数都是可选的，如果不填写任何参数，则以以上默认值为参数。
你一定迫不及待地想看效果了吧，我只做了一个简单的
| 代码如下 | 复制代码 |
| <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="dest/marquee.js"></script> <script type="text/javascript"> $(function() { $('.mod').each(function() { var _this = $(this), code = $.trim($('.demo', _this).html()).replace(/textarea>/, 'textarea>'); $('.code', _this).prepend($('<textarea>' + code + '</textarea>')); }); $('.mod_ft').each(function() { $('<div class="to_top"><a href="#mod_header" title="返回顶部">返回顶部</a></div>').appendTo($(this)); }); $('a[href*=#]').click(function () { if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop : targetOffset }, 1000); return false; } } }); }) </script> <style type="text/css"> * {margin:0;padding:0;} body{font:12px/1.4 SimSun,Arial,Helvetica,sans-serif;color:#333;} strong{font-weight:700;} :focus{outline:0;} #mod_header,#mod_main,#mod_footer{width:1000px;margin:0 auto 20px;} #mod_footer{margin:0 auto;padding-bottom:20px;font-family:Arial;} #mod_header h1{font:700 22px/2 'Microsoft YaHei';text-align:center;} #desc pre{font:13px/15px 'Lucida Console',Arial;color:#7F9F7F;} .mod{border-bottom:5px dashed #f00;margin-bottom:10px;padding-bottom:10px;} .mod_hd{} .mod_hd h2{margin-bottom:10px;padding:0 20px;font:700 16px/2 'Microsoft YaHei',SimSun;color:#fff;background:#104778;text-shadow:1px 1px 1px #8DB2E3;} .mod_bd{} .mod_ft strong{display:block;margin-bottom:5px;} .mod_ft ul{margin-bottom:10px;} .mod_ft li{list-style:disc inside none;line-height:20px;} .demo,.code{margin-bottom:10px;} .code textarea{margin:0;border:0 none;padding:0;width:100%;height:150px;font:12px/1.4 'Lucida Console',Arial;background:#ddd;resize:none;} .to_top{text-align:right;} .to_top a{text-decoration:none;} #mod_footer{text-align:center;} .wrap,.box{margin-bottom:10px;} .wrap ul,.wrap .ul{overflow:hidden;clear:both;*zoom:1;} .wrap li,.wrap .li{list-style:none;width:120px;height:80px;padding:5px;background:#ccc;margin:2px 5px 10px 5px;font:700 30px/80px Arial;text-align:center;} </style> <title>marquee.js - jQuery 多功能无缝滚动插件</title> </head> <body> <!-- S Header --> <div id="mod_header"> <h1>marquee.js - jQuery 多功能无缝滚动插件</h1> <div id="desc"> <pre> /*** @description 基于 jQuery 的多功能无缝滚动插件 @params auto: true # 是否自动滚动 interval: 3000 # 间隔时间（毫秒） direction: 'forward' # 向前 - forward / 向后 - backward speed: 500 # 移动速度（毫秒） showNum: 1 # 显示个数 stepLen: 1 # 每次滚动步长 type: 'horizontal' # 水平滚动 - horizontal / 垂直滚动 - vertical prevElement: null # 上一组按钮元素 prevBefore: function() {} # 上一组移动前回调 prevAfter: function() {} # 上一组移动后回调 nextElement: null # 下一组按钮元素 nextBefore: function() {} # 下一组移动前回调 nextAfter: function() {} # 下一组移动后回调 pauseElement: null # 暂停按钮元素 pauseBefore: function() {} # 暂停前回调 pauseAfter: function() {} # 暂停后回调 resumeElement: null # 继续按钮元素 resumeBefore: function() {} # 继续前回调 resumeAfter: function() {} # 继续后回调 @author i@wange.im @url https://github.com/wange1228/marquee-slide @blog http://wange.im @version 0.4.3 ***/ </pre> </div> </div> <!-- E Header --> <!-- S Main --> <div id="mod_main"> <!-- S module A --> <div id="module_a" class="mod"> <div class="mod_hd"> <h2>用例一：不带任何参数（默认参数）</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap1" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <script type="text/javascript"> $(function() { $('#wrap1').marquee(); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module A --> <!-- S module B --> <div id="module_b" class="mod"> <div class="mod_hd"> <h2>用例二：DOM 结构不用 ul>li</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap2" class="wrap"> <div class="ul"> <div class="li">1</div> <div class="li">2</div> <div class="li">3</div> <div class="li">4</div> <div class="li">5</div> <div class="li">6</div> <div class="li">7</div> <div class="li">8</div> <div class="li">9</div> </div> </div> <script type="text/javascript"> $(function() { $('#wrap2').marquee(); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module B --> <!-- S module C --> <div id="module_c" class="mod"> <div class="mod_hd"> <h2>用例三：自动滚动</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap3" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <script type="text/javascript"> $(function() { $('#wrap3').marquee({ auto: true, interval: 3000, speed: 500, showNum: 5, stepLen: 5 }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module C --> <!-- S module D --> <div id="module_d" class="mod"> <div class="mod_hd"> <h2>用例四：手动滚动</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap4" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <input type="button" value="上一组" id="prev4" /> <input type="button" value="下一组" id="next4" /> <script type="text/javascript"> $(function() { $('#wrap4').marquee({ auto: false, speed: 1000, showNum: 4, stepLen: 4, prevElement: $('#prev4'), nextElement: $('#next4') }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module D --> <!-- S module E --> <div id="module_e" class="mod"> <div class="mod_hd"> <h2>用例五：暂停/继续滚动</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap5" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <input type="button" value="暂停" id="pause5" /> <input type="button" value="继续" id="resume5" /> <script type="text/javascript"> $(function() { $('#wrap5').marquee({ auto: true, interval: 1000, showNum: 4, stepLen: 4, pauseElement: $('#pause5'), resumeElement: $('#resume5') }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module E --> <!-- S module F --> <div id="module_f" class="mod"> <div class="mod_hd"> <h2>用例六：向右滚动</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap6" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <script type="text/javascript"> $(function() { $('#wrap6').marquee({ auto: true, interval: 2000, speed: 800, showNum: 6, stepLen: 6, direction: 'backward' }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module F --> <!-- S module G --> <div id="module_g" class="mod"> <div class="mod_hd"> <h2>用例七：垂直滚动</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap7" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <script type="text/javascript"> $(function() { $('#wrap7').marquee({ auto: true, interval: 2000, showNum: 3, stepLen: 3, type: 'vertical' }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module G --> <!-- S module H --> <div id="module_h" class="mod"> <div class="mod_hd"> <h2>用例八：显示个数 !== 每次步长</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap8" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <input type="button" value="上一组" id="prev8" /> <input type="button" value="下一组" id="next8" /> <script type="text/javascript"> $(function() { $('#wrap8').marquee({ auto: false, prevElement: $('#prev8'), nextElement: $('#next8'), showNum: 4, stepLen: 3, type: 'vertical' }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module H --> <!-- S module I --> <div id="module_i" class="mod"> <div class="mod_hd"> <h2>用例九：支持回调</h2> </div> <div class="mod_bd"> <div class="demo"> <div id="wrap9" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <input type="button" value="上一组" id="prev9" /> <input type="button" value="下一组" id="next9" /> <script type="text/javascript"> $(function() { $('#wrap9').marquee({ auto: false, speed: 500, showNum: 3, stepLen: 3, prevElement: $('#prev9'), nextElement: $('#next9'), prevBefore: function() { alert('prev before callback~') }, prevAfter: function() { alert('prev after callback~') }, nextBefore: function() { alert('next before callback~') }, nextAfter: function() { alert('next after callback~') } }); }) </script> </div> <div class="code"></div> </div> <div class="mod_ft"></div> </div> <!-- E module I --> </div> <!-- E Main --> </body> </html> |
|
，基本能涵盖这个插件的所有功能了。更多参数组合可以达到更多 DEMO 中所没有的效果。
我把 marquee.js - jQuery 多功能无缝滚动插件提交到了 github 上，有兴趣的朋友可以前往下载最新版的 marquee.js，或者根据自己的实际需要，修改、扩展这个插件也是 OK 的，欢迎 fork。
时间： 2024-10-24 04:32:24