基于 simulation-scroll-y 插件可以实现很多效果及功能,查看: Full demo
finger-mover 提供中英双语文档。
安装和使用官方文档写的很清楚,这里就贴出地址: finger-mover 中文文档
根据文档介绍他有如下特性:
移动端模拟滚动的库有很多,例如:iscroll、xscroll、better-scroll 等等,那为什么还要一个 simulation-scroll-y 呢?答案是:这并不是一个轮子。不妨做如下对比:
库体积很大一部分是由框架所提供的功能决定的,但是在完成相同功能的前提下,simulation-scroll-y 应该算是最小的。
simulation-scroll-y 作为 finger-mover 的插件,其体积只有 4.42kb,即使加上 finger-mover 本身的 11.12kb 也才只有 15.54kb,关键是 finger-mover 还提供了其他移动的插件,供你选择。
如果你仅仅要实现一个模拟滚动已经下拉刷新、无限滚动的功能,那么使用 simulation-scroll-y 要比你一次性的引入其他框架如 iscroll 等要小的多。如果你要实现轮播图,完全可以使用 finger-mover 的轮播图插件,这比你使用 swiper 要划算的多。
在UC浏览器,手机QQ内的webview 都会出现此类问题。
看下图:
而 simulation-scroll-y 则不会出现这样的问题:
大多数的实现中,当多指操作时,会阻止运动,如下图:
另外一些不阻止滚动的实现中,虽然能滚动,但是也会出现奇葩的bug,如下图所示:
在这个实现中,虽然当第二根手指触摸屏幕时依然能够滚动,但是当拿开第一个手指时,连续滑动第二根手指,第二根手指并不能操作滚动元素,且在第二根手指滑动的过程中,连续使用第一根手指点按屏幕,会出现奇葩滚动动作。
以上问题,在 simulation-scroll-y 则不会出现,无论有几根手指触摸屏幕, simulation-scroll-y 都将控制权交给第一根手指,如果第一个手指拿开,那么第二根手指将继承第一根手指的状态,完美衔接滚动,此功能的实现得益于 Fingerd ,如下图:
一些现有实现中,在下拉刷新后,迅速上滑,然后再滑动下来,你会发现下拉挂掉了,永远收不回去,如下图:
另外的一些实现则规定了下拉刷新的形式:下拉后是停留等待 还是 不停留等待
而 simulation-scroll-y 则是完全给你自定义下拉操作的机会,你可以实现任何形式的下拉刷新操作,另外 simulation-scroll-y 在你滚动页面的过程中完全不会影响下拉操作,详情请查看 pullDown 选项。
jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧!1、html结构
<div class="numberRun1"></div>
2、js
<script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数(需要在页面中进行调用) <script> //数字滚动function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}) var nums = n setInterval(function(){numRun.resetData(nums) },3000) var numWidth= $(obj).width() $(obj).find('.mt-number-animate').css('width',numWidth) $(obj).css('width','100%') $(obj).find('.mt-number-animate').css('margin','0 auto') }window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518) } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll() }) </script>
3、图片案例
首先,用不着JS在实现,通过CSS就可以做到先建立一个位置容器,例如一个div
然后定义他的css属性position为fixed,通过top/bottom/left/right这四个属性可以控制他在屏幕上的位置
这样便可以做到无论屏幕如何滚动,这个窗口一直固定在窗口的固定位置
如果不希望这个窗口被其他元素遮挡,适当的设置他的z-index即可(例如999)