Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

在线演示

如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3jQuery来生成一个类似移动设备app的web页面效果,支持各种设备的响应式展示。

主要功能:

  • 页面响应式布局:使用bootstrap3的内置响应式Grid布局支持响应式,以便在不用的设备上显示内容
  • 支持iOS/Android设备上的移动到低端的页面弹跳效果:使用jQuery插件fancy-scroll.js
  • 图片预加载处理:jQuery插件jquery.imagesloaded.js
  • 数据内容提供方:dribbble API,这里使用jquery.jribbble.js来快速获取来自知名设计网站Dribbble的数据内容作为页面展示内容

Bootstrap3页面布局(Grid layout)

Bootstrap3和老版本不一样,它的最大最鲜明的区别就是Mobile First,因此内置了响应式支持,不需要想以前引用其它的CSS或者JS就可以完美支持响应式设计,如果你对于Bootstrap3的一些新特性有兴趣,可以阅读如下内容:

..........

阅读原文:Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值