Hook.js – 在传统网页上实现手机中的下拉刷新效果
我们都很喜欢移动设备上的“下拉刷新”功能,那么如果这个效果应用到传统网页上怎么样?嗯,Hook.js 可以实现。他们采用了手机和平板电脑中的这个创新,只要向下滚动了一下,然后弹回到顶部,页面就会自动刷新。
您可能感兴趣的相关文章
- 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏
- Textillate.js – 实现 CSS3 文本动画的简单插件
- 使用 ThreeSixty 创建 360 度全景图片预览效果
- 实用锦囊:推荐一款非常棒的响应式网页测试工具
- 令人印象深刻的 jQuery 模态框插件 – iLightBox
Hook.js 使用非常简单,首先引入下面三个文件:
1 2 3 | < script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></ script > < link rel="stylesheet" href="hook/hook.css" type="text/css" /> < script src="hook/hook.js" type="text/javascript"></ script > |
然后把下面的 HTML 代码放到 <body> 标签里:
1 2 3 4 5 6 | < div id="hook"> < div id="loader"> < div class="spinner"></ div > </ div > < span id="hook-text">Reloading...</ span > </ div > |
Hook.js 的实现其实很简单,完整源代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $( function () { window.loadheight = $( '#hook' ).height(); window.hidden = $( "#hook" ).animate( "marginTop" , "-" + loadheight + "px" ); window.visible = $( "#hook" ).animate( "marginTop" , "0px" ); $( "#hook" ).css( "marginTop" , "-" + loadheight + "px" ) }); $( function hook() { var loadheight = $( '#hook' ).height(); $(window).scroll( function (event) { var st = $(window).scrollTop(); if (st <= 0) { $( "#hook" ).animate({ "marginTop" : "0px" }, 200); $( "#hook" ).delay(500).slideUp(200, function () { window.location.reload() }) } if ($.browser.webkit) { if (st == 0) { $( 'body' ).css( 'overflow' , 'hidden' ) } } }) }); |
您可能感兴趣的相关文章
- Respond.js – 让IE6-8支持 CSS3 Media Query
- Debuggex – 超好用的正则表达式可视化调试工具
- 前端文摘——网页图片优化的实用工具和技巧分享
- Lazy Line Painter – 有趣的 jQuery 路径动画插件
- Zepto.js – 为现代浏览器而生的轻量JavaScript库
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
分类:
JavaScript
, 我的博文
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
2011-03-08 在EditPlus中使用JSLint校验JavaScript代码
2011-03-08 分享50个优秀的免费英文手写字体