• 应用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;
    })
    
  • 相关阅读:
    vfork与fork的区别
    常见的六种设计模式以及应用场景
    Java中常见的集合类比较
    排序——总结
    排序——交换排序
    排序——选择排序
    排序——归并排序
    排序——基数排序
    排序——插入排序
    设计模式
  • 原文地址:https://www.cnblogs.com/junwu/p/4840796.html
Copyright © 2020-2023  润新知