发布于2013-11-14,阅读10478次,收藏 7次,评论11条 - 来自GBCoder  | 收藏

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的一些新特性有兴趣,可以阅读如下内容:

注意:IE8不支持mediaqueire,所以如果IE8支持响应式,需要引用外部js类库:respond.js

在Bootstrap3中,页面网格布局缺省被定义为12个同等宽度的列,我们可以使用类似如下的语法来定义列的内容:

  • .col-xs-4 (超小屏幕设备占4个列)
  • .col-sm-4(小屏幕设备占4个列)
  • .col-md-4(中等屏幕设备占4个列)

布局的方式和老版本的布局有比较大的区别,主要使用如下的css前缀来定义Grid,如下:

  • .col-xs-:超小屏幕设备(手机)- 设备屏幕尺寸小于768px
  • .col-sm-:小型屏幕设备(平板)- 设备屏幕尺寸大于等于768px
  • .col-md-:中等屏幕设备(桌面PC)- 设备屏幕尺寸大于等于992px
  • .col-lg-:大型屏幕设备(桌面PC)- 设备屏幕尺寸大于等于1200px

更多请参考文档: http://getbootstrap.com/css/#grid

在本文中我们使用如下的布局来生成页面内容:

<div class="row" id="list">
<div class="col-xs-6 col-sm-4 col-md-2"></div>
<div class="col-xs-6 col-sm-4 col-md-2"></div>
<div class="col-xs-6 col-sm-4 col-md-2"></div>
<div class="col-xs-6 col-sm-4 col-md-2"></div>
<div class="col-xs-6 col-sm-4 col-md-2"></div>
<div class="col-xs-6 col-sm-4 col-md-2"></div>
...
</div>

在以上的CSS中,我们定义超小设备中,元素占用6个列,小型设备占用4列,中等设备占用2列。生成的布局效果其实就是:

  • 超小设备中,生成2列元素的布局
  • 小型设备中,生成3列元素布局
  • 中等设备中,生成6列元素布局

下面是具体不同设备上的显示效果图:

超小设备布局效果

小型设备布局效果

中等桌面设备布局效果

大型桌面设备布局效果

iOS/Android风格的滚动到底端弹跳效果

为了生成类似ios/android系统上的滚动到底顶(端)的弹跳特效,这里我们使用fancy-scroll.js这个插件,这个插件可以快速的帮助你生成类似的效果,这里有两个选项:

  • 页面弹跳效果(类似ios设备上的效果):Bounce
  • 页面的火焰效果(类似android设备上的效果):Glow

对应Bounce有如下一些参数:

animation: "bounce", //选择Bounce风格动画效果
bounceDistance: 80, //跳跃距离控制
animDuration: "0.3s", //跳跃延迟事件时间
animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)",  //Easing的效果控制

对应Glow有如下一些参数:

animation: "Glow", //或者使用glow效果
glowColor: "#202020", //glow效果对应颜色

大家可以按照自己的UI设计来选择风格,相关动画效果使用的是CSS3实现。

支持的浏览器如下:

  • Firefox
  • Chrome
  • Safari
  • IE10

如果你使用低版本的浏览器,可能看不到这个效果,这个效果主要使用CSS3实现滴。

图片预加载处理

如果一个web页面图片内容很多或者很大的话,如果直接使用img标签展现给用户,你会看到比较大的图片将会一点儿一点儿的加载到页面中,整个的效果和使用体验会让人不是很愉快,在这里我们使用JQuery的图片预加载插件imagepreload来整体加载内容图片后,再整体呈现给用户,效果会非常自然和流畅,主要代码如下:

list.imagesLoaded().done( function( instance ) {
	$('#loading').hide();
	$('.container').fadeIn();
	morebutton.removeAttr("disabled");
  })
  .progress( function( instance, image ) {			
	if(image.isLoaded){
		loadingcount++; // 计算目前已加载的图片数量,展现给访问用户
		$('#count').html(loadingcount);
	}
  });

在上面代码中,我们使用jQuery的.done方法来处理整体加载完后的页面展现,及其“加载中”提示的隐藏。

.process方法用户处理每一个加载图片,这里我们调用并且设置当前已加载的图片张数,在加载中动画中,提示给用户。

滚动效果

这里我们在页头和页尾部分添加了两个滚动按钮,使用jquery.scroll插件,使用非常简单如下:

/*  点击按钮滚动效果 */
$('#scrolltobottom').click(function(){
	$('body').scrollTo( '#footer', 500, { easing:'swing', queue:true, axis:'xy' } );
});

/*  点击按钮向上滚动效果 */
$('#scrolltotop').click(function(){
	$('body').scrollTo( '#navbar', 500, { easing:'swing', queue:true, axis:'xy' } );
});

点击按钮后,会滚动到顶端和低端,触发页面弹跳效果。

向下滚动按钮

向上滚动按钮

界面相关图标和元素

整体界面中的按钮,图标和元素,都使用Bootstrap缺省的主题及其相关组件生成。

Bootstrap3的文章非常清晰,组件使用也非常简单,大家只需要阅读文档即可了解。

 图标按钮:

    <button type="button" class="btn btn-success btn-lg dribbbletitle">
        <span class="glyphicon glyphicon-th"></span>&nbsp;作品列表
    </button>

导航栏:

	<nav class="navbar navbar-default" role="navigation" id="navbar">
	  <!-- Brand and toggle get grouped for better mobile display -->
	  <div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		  <span class="sr-only">切换导航</span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		</button>
		<a class="navbar-brand logo" href="http://www.gbtags.com/gb/site/terry.htm" target="_blank">GBtags.com</a>
	  </div>

	  <!-- Collect the nav links, forms, and other content for toggling -->
	  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		<ul class="nav navbar-nav">
		  <li class="active"><a href="#">iOS/Android滚动到底端页面弹跳效果</a></li>
		  <li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">更多 <b class="caret"></b></a>
			<ul class="dropdown-menu">
			  <li><a href="http://www.gbtags.com/gb/share/360.htm">jQuery实现的魔术布局效果</a></li>
			</ul>
		  </li>
		</ul>
		<form class="navbar-form navbar-left" role="search" action="http://www.gbtags.com/gb/search.htm">
		  <div class="form-group">
			<input type="text" id="keyword" class="form-control" placeholder="搜索">
		  </div>
		  <button type="submit" id="gbsearch" class="btn btn-default">搜索</button>
		</form>
		<ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
			<a href="http://www.gbtags.com" class="dropdown-toggle" data-toggle="dropdown">访问社区 <b class="caret"></b></a>
			<ul class="dropdown-menu">
			  <li><a href="http://www.gbtags.com/gb/syslogin.htm">登录</a></li>
			</ul>
		  </li>
		</ul>
	  </div><!-- /.navbar-collapse -->
	</nav>

相关的资料:

jQuery - http://jquery.com

Bootstrap3 - http://getbootstrap.com

jQuery imagesloaded - https://github.com/desandro/imagesloaded

希望大家喜欢这个boostrap3和jQuery实现的响应式页面效果,如果有任何问题或者建议,请给我留言,感谢阅读并且请关注我的极客主页:

关注我的极客主页:http://www.gbtags.com/gb/site/terryli.htm


关于作者

GBCoder

极客标签编程挑战发布官方组织和专业布道师~~~

极客主页:GBCoder
新浪微博:访问微博

评论或回答

  1. 没有任何评论
评论请先登录



以后再转发,立刻下载!