应用seajs 做了个向上滚动的demo
2015-09-26 15:08
525 查看
目录结构式这样滴
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
----------------------------------------------------------------
main.js
-----------------------------------------------------------------
test.min.js
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; })
相关文章推荐
- javascript 奇技淫巧45招
- JavaScript高级程序设计之基本概念之函数第3.7讲笔记
- JavaScript高级程序设计之基本概念之语句第3.6讲笔记
- 浅谈JSONP跨域请求
- JSON数据解析
- JavaScript高级程序设计之基本概念之相等操作符第3.5.8讲笔记
- JavaScript高级程序设计之基本概念之相等操作符第3.5.7讲笔记
- JavaScript高级程序设计之基本概念之关系操作符第3.5.6讲笔记
- JavaScript高级程序设计之基本概念之操作符之加性操作符第3.5.5讲笔记
- JavaScript高级程序设计之基本概念之操作符之乘性操作符第3.5.4讲笔记
- JavaScript高级程序设计之基本概念之操作符之布尔操作符第3.5.3讲笔记
- JS-SDK设置安全域名
- JavaScript高级程序设计之基本概念之操作符之位操作符第3.5.2讲笔记
- JavaScript高级程序设计之基本概念之操作符之一元操作符第3.5.1讲笔记
- javascript原型和多维数组遍历
- 动态JSP页生成静态HTML的方法
- 一个jsp页面中多个提交按钮提交不同的页面
- JSP+EXt2.0实现分页的方法
- js的Touch事件
- JavaScript高级程序设计之基本概念之数据类型第3.4讲笔记