应用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;
})
应用seajs 做了个向上滚动的demo的更多相关文章
- view向上滚动
之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向 ...
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- UpMarqueeTextView-模仿淘宝client向上滚动的广告条
UpMarqueeTextView一个简单的向上滚动的相似跑马灯效果,项目中用到的时候是接受到推送过来的消息向上滚动一次.没有做动态的gif效果,所以都是一些纯文字的简单记录. UpMarqueeTe ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- iscroll双重滚动,向上滚动隐藏一部分,下拉后显示
最近项目需求:下面是页面,当用户向上滚动时候,[隐藏的]部分也向上滚动直至消失,这时候[标题]和[搜索框]在最顶部,而[内部的]可以继续滚动,而当[内部的]滚动到最顶部时候,也就是[这个是内部1]时候 ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
随机推荐
- Object-C知识点 (六) 开发中的技巧
本文主要介绍开发中的一些实用技巧 #pragma mark - 代码控制Home按键 [[UIApplication sharedApplication] performSelector:@selec ...
- iOS中的数据存储方式_Plist
plist文件只能存储OC常用数据类型(NSString.NSDictionary.NSArray.NSData.NSNumber等类型)而不能直接存储自定义模型对象; 我们拿NSData举例: /* ...
- node 文件下载到本地 (支持中文文件名)
downloadfile:function(req,res,next){ var name= encodeURI(req.query.name); var path= req.query.url; v ...
- 详解wordpress如何把文件保存到阿里云OSS上!
自己搞了一个Wordpress的博客,装完之后一直晾着没管,最近闲来开荒.为了减小服务器的带宽.存储.CUP的压力,决定把博客中的所有文件都保存到阿里云OSS上面. 关于这个问题,自己去调用OSS的S ...
- 8.Yii2.0框架控制器接收get.post数据
8.Yii2.0框架控制器接收get.post数据 一.get传参 <?php /** * Created by Haima. * Author:Haima * QQ:228654416 * D ...
- Python基础——时间
导入时间模块 import time 时间戳 print(time.time()) 获取本地时间 print(time.localtime(time.time())) 时间显示格式化 print(ti ...
- 《流畅的python》读书笔记,第一章:python数据模型
这本书上来就讲了魔法方法,也叫双下方法.特殊方法,通过两个例子对让读者了解了双下方法的用法,更重要的是,让我一窥Python的语言风格和给使用者的自由度. 第一个例子:一摞Python风格的纸牌: i ...
- Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details.
文档:Docker 启动错误.note链接:http://note.youdao.com/noteshare?id=065111d506e1b132dc930dbe88f5d7b0&sub=A ...
- POJ:2109-Power of Cryptography(关于double的误差)
Power of Cryptography Time Limit: 1000MS Memory Limit: 30000K Description Current work in cryptograp ...
- emacs写cnblog博客
emacs的版本 org-mode版本 参考链接: 用Emacs管理博客园博客 用emacs org-mode写cnblogs博客 用emacs org-mode写博客 & 发布到博客 ...