应用seajs 做了个向上滚动的demo
目录结构式这样滴
sea
sea-module
jquery-1.10.2.min.js
sea.js
static
css
t.min.css
img
test
test.min.js
main.js
test.html
---------------------------------------------------------------
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/css/t.min.css" /> <script type="text/javascript" src="./sea-module/sea.js"></script> </head> <body> <div id="demo"> <div id='box'> <div> <li>aaa1</li> <li>aaa2</li> <li>aaa3</li> <li>aaa4</li> <li>aaa5</li> </div> <div> <li>aaa6</li> <li>aaa7</li> <li>aaa8</li> <li>aaa9</li> <li>aaa10</li> </div> <div> <li>aaa11</li> <li>aaa12</li> <li>aaa13</li> <li>aaa14</li> <li>aaa15</li> </div> </div> </div> <script type="text/javascript"> seajs.config({ base:'./sea-module', alias:{ jquery:'jquery-1.10.2.min.js' } }) seajs.use("./static/test/main"); </script> </body> </html>
----------------------------------------------------------------
main.js
define(function(require,exports,module){ var $ = require('jquery'); var s = require('./test.min').sc; s.smove(); })
-----------------------------------------------------------------
test.min.js
define(function(require,exports,module){ var $ = require('jquery'); var sc = (function(_iset){ _iset = $.extend({box:$('#box'),timer:2000,interval:2000}); var _moving; return { smove:function(){ _iset.box.hover(function(){ clearInterval(_moving); },function(){ _moving = setInterval(function(){ var field = _iset.box.find("div:first"); var _height = field.height(); field.animate({marginTop: -_height + 'px',}, _iset.timer, function() { field.css('marginTop',0).appendTo(box); }); },_iset.interval) }).trigger("mouseleave"); } } })(); exports.sc = sc; })