栏目导航
热点推荐
- 网页表单设计:提高表单可用性的1
- 网站设计必须充满诗意 用户体验
- 网页元素设计和网页转场设计
- 50个制作网站的诀窍
- 高性能网站建设的黄金法则
- 网站用户体验七十六个要点分享
- 网页图片大小自适应方法
- 最容易犯的10个HTML标签错误
- 网页设计事半功倍的构图技巧
- 网页用户体验:网页注册表单设计
- 精美网页专题页面设计的经验总结
- 15 个第三方Web 表单资源
阅览排行
jQuery跟随浏览器滚动条浮动层效果
www.jz123.cn 2009-07-06 来源: bbon.cn 责任编辑(袁袁) 我要投递新闻
今天在处理客户提交的WordPress企业定制需求时,有一个”跟随浏览器滚动条浮动层,点击后返回顶部” 的功能需要实现,当然,首先想到的就是无所不能的强大Jquery。在GG的帮助下,通过Jquery插件可以轻松实现。使用 jQuery Scroll Follow。
必须调用的js有:
操作说明:
1. 包含以上三个必须得js脚本文件到你的项目:
以下为引用的内容: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.scrollFollow.js"></script> |
操作说明:
1. 包含以上三个必须得js脚本文件到你的项目:
以下为引用的内容: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.scrollFollow.js"></script> |
2. 绑定Scroll Following方法到希望实现该效果的DOM对象:
以下为引用的内容: <script type="text/javascript"> $( '#example' ).scrollFollow(); </script> |
3. 还可以为绑定DOM对象的Scroll Following设置参数:
以下为引用的内容: <script type="text/javascript"> $( document ).ready( function () { $( '#example' ).scrollFollow( { speed: 1000, offset: 60, killSwitch: 'exampleLink', onText: 'Disable Follow', offText: 'Enable Follow' } ); } ); </script> |
4. 或者为绑定的DOM对象指定一个上级(父)元素(通过调用父元素ID),为该绑定对象设置一个外部容器,使得效果只能在该限定容器范围内有效:
以下为引用的内容: <script type="text/javascript"> $( document ).ready( function () { $( '#example' ).scrollFollow( { container: 'outer' } ); } ); </script> |
更多参数设置及效果实现,可参看插件官方文档:jQuery Scroll Follow
2
上一篇:好的404错误页面设计增强用户体验 下一篇:12个以水为灵感的网页设计