响应式的无限滚动全屏dribbble作品集布局展示效果

灰太狼 2022-02-04 01:55 234阅读 0赞

日期：2013-5-28  来源：[GBin1.com][]

![响应式的无限滚动全屏dribbble作品集布局展示效果][dribbble]

**[在线演示/下载][Link 1]**

大家还记得前面分享过的两个魔术布局效果吧：

*  [响应式的dribbble作品集魔术布局展示效果][dribbble 1]

*  [宽度自适应缩进的响应式dribbble作品集魔术布局展示效果][dribbble 2]

今天分享一个使用jQuery sly插件构建的全屏响应式布局布局效果，支持无限滚动。

相关插件：

*  Jribbble ：一个帮助你方便调用dribbble API的jQuery插件
 *  Sly：一个帮助你生成水平方向滚动效果的jQuery插件

主要Javascript代码：

var options = {
    			scrollBy: 200,
    			speed: 200,
    			easing: 'easeOutQuart',
    			scrollBar: '#scrollbar',
    			dynamicHandle: 1,
    			dragHandle: 1,
    			clickBar: 1,
    			mouseDragging: 1,
    			touchDragging: 1,
    			releaseSwing: 1
    		};
    		var frame = new Sly('#frame', options);
    ......

具体代码，请大家下载后自行查看。

来源：[响应式的无限滚动全屏dribbble作品集布局展示效果][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/jquery/20130528-dribbble-responsive-design/
[dribbble]: http://www.gbin1.com/technology/jquery/20130528-dribbble-responsive-design/title.jpg
[Link 1]: http://www.gbtags.com/gb/share/1046.htm
[dribbble 1]: http://www.gbtags.com/gb/share/360.htm
[dribbble 2]: http://www.gbtags.com/gb/share/558.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关响应式布局

目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1

快来打我*/ 2022年10月18日 01:38/ 0 赞/ 366 阅读

相关 html响应式布局效果图,响应式网页布局的实现方法原理

昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备(台式电脑，笔

绝地灬酷狼/ 2022年10月06日 03:55/ 0 赞/ 215 阅读

相关 javaScript实现全屏页面滚动效果(优化)

在我读完javaScript DOM之后，对解释型的javaScript脚本语言有了更加深刻的感悟和理解，并使我的javaScript代码更加规范化。接下来，我们转入今天我

淩亂°似流年/ 2022年09月25日 13:19/ 0 赞/ 251 阅读

相关 pagePiling.js - 创建漂亮的全屏滚动效果

[![18031fc0-391c-4c76-b949-f91130f11a44.jpg][]][18031fc0-391c-4c76-b949-f91130f11a44.jpg

太过爱你忘了你带给我的痛/ 2022年08月13日 14:52/ 0 赞/ 160 阅读

相关 20个全屏响应式菜单效果荟萃

[![bd5c9e5e-97aa-4890-ace7-b586a6e0ce72.jpg][]][bd5c9e5e-97aa-4890-ace7-b586a6e0ce72.jpg

落日映苍穹つ/ 2022年08月11日 11:28/ 0 赞/ 183 阅读

相关超酷的响应式动态片状全屏轮播式幻灯效果

![165.jpg][] 2014-8-6 10:22:23 上传 [下载附件 (39.7 KB)][_39.7 KB] [在线演示1][1] [ 在线演示2]

太过爱你忘了你带给我的痛/ 2022年08月05日 12:05/ 0 赞/ 199 阅读

相关响应式布局

<table style="height:40px; border-color:a9a9a9; border-width:0px; background-color:a9a9a

àì夳堔傛蜴生んèń/ 2022年07月11日 08:14/ 0 赞/ 307 阅读

相关超酷的响应式dribbble设计作品瀑布流布局效果

日期：2013-2-21 来源：[GBin1.com][] [![超酷的响应式dribbble设计作品瀑布流布局效果][dribbble]][dribbble_dribbb

约定不等于承诺〃/ 2022年03月29日 03:10/ 0 赞/ 180 阅读

相关响应式布局的相册效果

响应式布局的相册效果，效果如下图所示，或者看看 [demo][]，记得调整浏览器宽度哟，或者直接 [下载][Link 1]。开始制作吧，先来html <ul

超、凢脫俗/ 2022年02月17日 09:25/ 0 赞/ 259 阅读

相关响应式的无限滚动全屏dribbble作品集布局展示效果

日期：2013-5-28 来源：[GBin1.com][] ![响应式的无限滚动全屏dribbble作品集布局展示效果][dribbble] [在线演示/下载][Link

灰太狼/ 2022年02月04日 01:55/ 0 赞/ 235 阅读