zepto中的scrollTo
//zepto没有scrollTo动画,这里扩展了一个scrollTo函数
$.fn.scrollTo = function(options) {
var defaults = {
scrollTop: 0, //滚动目标位置
durTime: 500, //过渡动画时间
delay: 30, //定时器时间
callback: null //回调函数
};
var opts = $.extend(defaults, options),
timer = null,
_this = this,
curTop = _this.scrollTop(), //滚动条当前的位置
subTop = opts.scrollTop - curTop, //滚动条目标位置和当前位置的差值
index = 0,
dur = Math.round(opts.durTime / opts.delay),
smoothScroll = function(t) {
index++;
var per = Math.round(subTop / dur);
if (index >= dur) {
_this.scrollTop(t);
window.clearInterval(timer);
if (opts.callback && typeof opts.callback == 'function') {
opts.callback();
}
return;
} else {
_this.scrollTop(curTop + index * per);
}
};
timer = window.setInterval(function() {
smoothScroll(opts.scrollTop);
}, opts.delay);
return _this;
};
//用法
$(".container").scrollTo({
scrollTop: curOffsetTop,
durTime: 0
});
zepto中的scrollTo的更多相关文章
- zepto中的touch库与fastclick
1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...
- 这些Zepto中实用的方法集
前言 时间过得可真快,转眼间2017年已去大半有余,你就说吓不吓人,这一年你成长了多少,是否荒度了很多时光,亦或者天天向上,收获满满.今天主要写一些看Zepto基础模块时,比较实用的部分内部方法,在我 ...
- Android中的ScrollTo和ScrollBy解析
关于Android中的ScrollBy和ScrollTo方法相信大家并不陌生,这两个方法是在View中实现的.所以在各个继承了View的类都可以使用改方法. 在View中对这两个方法的源码编写是这样的 ...
- zepto中的属性设置
上次看zepto的init方法时,有一段属性设置的代码,先来看看其表现: if (isPlainObject(properties)) { nodes = $(dom) $.each(properti ...
- zepto中$.proxy()的到底有多强大?
好吧,其实是标题党了,哈哈,只是想总结一下工作中遇到$.proxy()的用法而已. 一.语法: $.proxy()有两种使用语法 1)$.proxy(fn,context),fn是一个函数,conte ...
- 使用zepto中animate报错“Uncaught TypeError: this.bind is not a function”的解决办法
在使用zepto时,我先引入zepto.min.js,然后引入fx.js,但是在使用animate函数时,控制台却报如下错误: Uncaught TypeError: this.bind is not ...
- 从zepto中学习方法
前言,今天开始学习Zepto源码,这里仅仅几下里面能用到的方法..陆续补充ing... 一,判断类型函数 function type(obj) { return obj == null ? Strin ...
- 阻止长按复制页面中的内容;zepto中touch中的应用必须先加载event模块之后;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- zepto中给不存在的元素设置样式并绑定事件的坑
在移动端使用zepto选择器时,一般如果元素不存在会返回一个空的zepto对象. zepto在设置元素样式时,提供了两个入参方式,一种键值对方式$(".ter").css({&qu ...
随机推荐
- 金融量化分析【day112】:量化平台的使用-初始化函数
一.set_benchmark - 设置基准 1.实现代码 # 导入函数库 import jqdata #初始化函数,设定基准等等 def initialize(context): set_bench ...
- Web概述
Web概述 1. JavaWeb 使用java开发的基于互联网的项目 2. 软件架构 C/S:客户端服务器架构 优点:用户体验好,很多数据在本地 缺点:安装.开发.部署.维护麻烦 B/S:浏览器服务器 ...
- L1-Day3
L1-Day31.太阳从西边落下. [我的翻译]The sun falls in the west. [标准答案]The sun sets in the west. [对比分析]落下fall与set的 ...
- 全卷积网络 FCN 详解
背景 CNN能够对图片进行分类,可是怎么样才能识别图片中特定部分的物体,在2015年之前还是一个世界难题.神经网络大神Jonathan Long发表了<Fully Convolutional N ...
- Jetty - 教程
Jetty使用教程(一)——开始使用Jetty : https://www.cnblogs.com/yiwangzhibujian/p/5832597.html jetty 的工作原理以及与 Tomc ...
- jenkins备份与恢复【转】
jenkins这里我通过thinbackup插件进行对jenkins的配置备份与恢复 1丶安装thinbackup插件 2丶系统管理选择thinbackup插件 3丶创建备份目录 mkdir /bac ...
- installshield安装包制作
入门教程:http://blog.csdn.net/gaofang2009/article/details/5260065 入门教程:http://blog.csdn.net/plfl520/arti ...
- Alpha 冲刺 (8/10)
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之8 团队部分 后敬甲(组长) 过去两天完成了哪些任务 首页重新设计 课程时间线确定 答辩准备 接下来的计划 ...
- 【原创】大数据基础之Zookeeper(1)介绍、安装及使用
zookeeper3.4.11 http://zookeeper.apache.org/ 一 简介 ZooKeeper is a centralized service for maintaining ...
- 【原创】大数据基础之ElasticSearch(1)简介、安装、使用
ElasticSearch 6.6.0 官方:https://www.elastic.co/ 一 简介 ElasticSearch简单来说是对lucene的分布式封装,增加了shard(每个shard ...