☀【插件】iScroll

【☀【插件】iScroll】的更多相关文章

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文…

jquery——移动端滚动条插件iScroll.js

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来自定义滚动条以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够…

前端插件--isCroll的使用

中文文档地址: http://wiki.jikexueyuan.com/project/iscroll-5/ 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, i…

移动设备web开发插件iScroll的使用详解

地址:http://blog.nnnv.cn/index.php/archives/65…

Swiper+ ejs模板引擎+ iScroll插件知识总结

一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图官网 http://www.swiper.com.cn/# html结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swip…

iscroll

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本. 概述但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功…

Jquery插件收集

移动端滚动条插件iScroll.js http://www.cnblogs.com/starof/p/5215845.html http://www.codeceo.com/article/35-jquery-skills.html 开源中国jquery插件:http://www.oschina.net/project/tag/356/jquery-file-upload jquery miniui:http://www.miniui.com/…

iScroll 4.2.5 中文API

概况资料来源 http://cubiq.org/iscroll-4 http://www.cnblogs.com/wanghun/archive/2012/10/17/2727416.html http://qbaty.iteye.com/blog/1221061 iScroll基本信息官网:http://cubiq.org/iscroll-4 更新:2012.07.14 版本:v4.2.5 兼容:iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android…

小技巧css解决移动端ios不兼容position:fixed属性，无需插件

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript"> window.onscroll=function(){ $(".fixed").css("top",…

iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）

移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -webkit-overflow-scrolling:touch; 完事!可拿设备去测的时候有趣了,Pc all browser正常,ios正常 ,android失效.泥马在android下效果与 overflow:hidden;一样,溢出部分隐藏了! 水平有限,用尽吃奶力各种解决未果,网上一顿乱搜,Go…

基于iscroll实现下拉和上拉刷新

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本. 概述但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功…

源生js惯性滚动与回弹效果

在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实现的,里面涉及到的弹力公式以及惯性效果还有一大堆临界点的判断,很是考验人. 在网上找了一下,看到有大神的一篇相关的笔记,所以复制过来,仔细研究. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ch…

前端学习(三十）es6的一些问题（笔记）

赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐逗号表达式 var a = 5, b = 3, c = 2; 听逗号最后一个 if(0,1){ if(1,0) true √ true }else{ …

AngularJS 项目开发实战

目录啰嗦一下你问我答目录结构压缩其他啰嗦一下最近在开发一个项目时,调研了一下AngularJS,发现这个框架功能很丰富,而且用起来也很方便,所以深入了解了一下,在此分享一下我的感悟. AngularJS是一个MVVM框架,所谓MVVM框架,即:Model-View-ViewModel,通俗一点的解释是:当数据发生变化时,框架自动进行数据绑定,自动更新页面上的数据. 这一点可以说是非常"神奇"的功能,可以减少我们很多的工作量.把我们从复杂的DOM结构中解脱出来,用剩余的时间…

常用js代码积累

1,js判断进入可视区,参考(亲测不行):https://www.cnblogs.com/Marydon20170307/p/8830069.html 重点学习的话,可参考: js计算元素距离顶部的高度及元素是否在可视区判断:https://www.cnblogs.com/damonFeng/archive/2018/01/30/8378123.html https://www.jb51.net/article/103459.htm $(window).scroll(function() { /…

iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从swiper上开始滑动的时候,整个scroll就显得很不灵敏.各种调试,各种alert终于把问题定位在swiper.js的touchend上. touchend没有冒泡到scroll上,但是touchstart,toucnmove是有冒泡到scroll上的. 找了好久都没有找到哪里阻止了冒泡.最后想到一…

集成iscroll 下拉加载更多 jquery插件

一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动加载二.插件集成组件: iscroll,imgLoad 其中iscroll修复了在ios9.0以上,滑动时触摸屏幕会出现闪屏的情况. 三.插件适用:移动端,为解决在ios下面适用div滚动,不流畅.,移动端的滚动到底部自动加载数据. 四.插件API 1.配置 { url: null, //列表的链…

使用iScroll和photoswipe写手机浏览图片的插件的几点经验

首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能左右滑动图片,当图片很长的时候要能上下滑动浏览全部图片,还要支持手势缩放,特别是较长或者较宽的图片. 1. 当最开始的时候,我做了一个本地缓存,把图片保存起来,为了加载滑动图片能更加流畅. js代码:var json=new Array(); for(var i=0;i<4;i++){//4张图 j…

iScroll.js插件使用方法

iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料. 参考:http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html , http://www.nb88.net/Index/p/id/406 官网:http://cubiq.org/is…

H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多

前言在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果,我很喜欢.感觉有回应. 现在开始实现我页面的第一个交互效果,让我的页面更生动一点. 实现的插件基于iScroll.js插件代码 html <div class="header">我是头部固定</div> <div id="wrapper&quo…

关于iscroll.js插件的使用

iscroll 作用: 可以让区域滚动效果好看一些使用: 1. html结构外面必须包一层盒子,切内部的元素要尽量简单,不然会影响滚动效果 <div id="wrapper">//overflow:hidden; <ul> //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden. <li>1</li> <li>2</li> <li&…

iScroll 4.2.5 中文API √http://www.gafish.net/api/iScroll.html -webkit-overflow-scrolling: touch <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="wi…

使用iscroll插件实现下拉刷新功能

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-…

关于iscroll插件的使用

本次项目有一个需要多信息展示,需要左右滑动的效果,查资料了解到iscroll,就拿来用,如下调用: var myscroll = new IScroll("#wrapper", {eventPassthrough:true,scrollX: true,scrollY:false,hScrollbar:false,preventDefault:false}); eventPassthrough:true 滑动区域是左右滑动,上下滑动时连同真个页面滑动 scrollX:true X轴滑…

写一个js向左滑动删除交互特效的插件——Html5 touchmove

需求描述需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp…

初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 注:建议使用压缩版的 JavaScript文件:bootstrap.js 和 bootstrap.min.js 都包含了所有插件,在使用时,…

H5基于iScroll实现下拉刷新，上拉加载更多

前言前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时…

分享20款移动开发中很有用的 jQuery 插件

今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制了今年新出炉的 jQuery 移动插件列表,在列表中收集了滑块,旋转木马,画廊,触摸插件,菜单等帮助你创建响应式的,美丽和引人注目的 Web 应用程序. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的…

滚动条美化实践（原生js，iscroll，nicescroll）

近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏览器下表现非常漂亮,但是在ie和火狐下无法兼容,还是非常丑的默认样式. 原计划使用css hack打个补丁美化一下,想到ie hack以后变色的默认滚动条,觉得浑身"蓝瘦香菇".于是决定重写一下这个部分,反正以后用到的地方可以直接拿出来用. 第一次计划打算自己手写,反正逻辑挺简单的,设定个…

引用iScroll.js实现上拉和下拖刷新

使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageIndex参数,而初始化加载时需要从后台返回一个pageCount以便前台判断. 4.最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(p…