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 ...
随机推荐
- LoadRunner【第五篇】关联
关联的定义及使用场景 关联:将服务器提供动态变化的值存放在变量中,当需要使用该变量时,由LoadRunner自动从服务器响应的信息中获取该值,并在后面使用的过程中进行替换.(也可能是前端页面动态生成的 ...
- js jquery 判断元素是否在数组内(转)
一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...
- node.js的基础知识
第一部分知识: .命令行窗口(小黑屏).CMD窗口.终端.shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令: dir 列出当前目录下的所有文件 c ...
- 浅谈js中的this关键字
---恢复内容开始--- this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解 ...
- Appium测试,定位H5元素(HTML5)
代码如下: public static void main(String[] args) { try { AndroidDriver driver; ...
- crm 数据展示 和分页思想(一)
1. 数据的展示 数据通过ORM查询出来 对象列表 QuerySet 1. 普通的字段 对象.字段名 ——> 数据库中的值 <td>{{ customer.phone }}</ ...
- [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.2 一维反应流体力学方程组的 Lagrange 形式
1. 一维粘性热传导反应流体力学方程组的 Lagrange 形式 $$\beex \bea \cfrac{\p \tau}{\p t'}-\cfrac{\p u}{\p m}&=0,\\ \ ...
- 在vue中引入scss
先npm安装stylus和stylus-loader (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...
- C#学习笔记-XML的读写(一)
需要解析的配置XML <?xml version="1.0" encoding="utf-8" ?> <configurations> ...
- NB-IoT不一定最完美 但足以成为决定ofo与摩拜物联网胜负的关键【转】
转自:http://news.rfidworld.com.cn/2017_11/3d5ed5c5d8cb9949.html 2018年到来之前,如果还不懂物联网,你会被淘汰. 今年1月,工信部< ...