应用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;
})
原文地址:https://www.cnblogs.com/junwu/p/4840796.html