Day: May 29, 2015

jQuery模拟原生态App上拉刷新下拉加载效果代码

以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用。 DEMO:http://sources.ikeepstudying.com/drop-more/ 下载:jQuery模拟原生态App上拉刷新下拉加载效果代码   2.  jquery iscroll上拉 下拉加载内容 DEMO:http://sources.ikeepstudying.com/cubiq-iscroll/ 下载:jquery-iscroll  | 简约版: cubiq-iscroll   3. 移动端下拉刷新、上拉加载更多… Read More

重新拎一遍js的正则表达式

前言 js的正则表达式是前端中比较重要的部分,加入你要去面试,正则的题目必不可少。我之前的这篇文章中提及过。具体可以看:http://www.haorooms.com/post/qianduan_mianshi 正则表达式规则 一、普通字符 字母、数字、汉字、下划线、以及后边章节中没有特殊定义的标点符号,都是”普通字符”。表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的一个字符。 举例: 表达式 “o”,在匹配字符串 “haorooms” 时,匹配结果是:成功;匹配到的内容是:”o”;匹配到的位置是:开始于2,结束于3。[注:o匹配一般只匹配第一个,假如要匹配所有的,那么表达式要加”/g”,就可以找到全局所有的。] 二、简单的转义字符 一些不便书写的字符,采用在前面加 “/” 的方法。这些字符其实我们都已经熟知了。 表达式 可匹配 /r, /n… Read More

js网页顶部线性页面加载进度条,jquery头部线性进度条总结

前言 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。 头部LoadingBar线性进度条总结 上面的代码只是静态效果,没有和网页加载联系在一起,要和网页加载联系在一起,今天推荐几个插件。 插件一:LoadingBar LoadingBar.js的地址是:http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/ 用ajax方式读取页面内容,然后加载。 插件二:NProgress.js NProgress.js的地址是:http://ricostacruz.com/nprogress/ 由于我也没有实际应用过,在这里就不多多阐述了,具体的方法里面都有详细的描述。 静态效果的实现 下面我再来说一说文章一开始的那个加载效果的实现吧!虽然只是静态的,但是也有借鉴意义,代码也是来源于网络。 由于上面的topbar是用css3写的,所以兼容性不是很好,IE游览器有些效果不兼容。大体的写法如下: body{ margin:0; } #progress {… Read More

jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。 遇到问题 1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注! 2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。 单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn ||… Read More