微信滚屏效果分分钟搞定 | 微信上的活动页面原来是这么做的
Petia
Web Designer
20人收藏 9571次学习

微信滚屏效果分分钟搞定 | 微信上的活动页面原来是这么做的

翻译:1KE主编 沙丁鱼

如需转载请联系1KE市场部 shuang@1ke.co

传统的网页设计偏向于垂直滚动的页面,可以有效呈现表格、结构型的文字内容等。

近年来,水平滚动的页面设计越来越受到人们的欢迎,它更适用于浏览相册、作品集、产品介绍等采集式内容。

其实制作一款水平滚动页面并不难,一招jQuery小技巧即可帮你轻松搞定!

Demo演示

手机用户可以点击以下地址查看演示 (打开演示页用手指左右滑动查看效果)
http://trgraglia.github.io/jquery.horizonScroll.js/demo/index.html

安装jQuery库与横向滚动插件

首先,我们需要下载jQuery库和用于横向滚动的插件。在你的html中代码插入以下语句:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.horizonScroll.js"></script>

接下来,我们还需要用到jQuery的触控插件,用于手指点击、滑动或者鼠标控制:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

 

HTML结构撰写

完成安装工作之后我们来看看代码部分。

创建导航:

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>

创建分区:

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

加上必要的CSS部分:

html,
body {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
}
 
section {
 float: left;
 display: block;
 height: 100%;
 padding: 0;
 margin: 0;
}
 
.horizon-prev,
.horizon-next {
 position: fixed;
 top: 50%;
 margin-top: -24px;
 z-index: 9999;
}
 
.horizon-prev { left: 20px; }
.horizon-next { right: 20px; }

初始化插件:

$('section').horizon();

以下是示例插件初始化内容:

$('section').horizon({
scrollTimeout: null,
scrollEndDelay: 250,
scrollDuration: 400,
i: 0,
limit: 0,
docWidth: 0,
sections: null,
swipe: true,
fnCallback: function (i) {
}
 
});

这样就完成了我们的demo,效果如下图

手机用户可以点击以下地址查看演示 (打开演示页用手指左右滑动查看效果):
http://trgraglia.github.io/jquery.horizonScroll.js/demo/index.html

源码下载请戳里:
https://github.com/trgraglia/jquery.horizonScroll.js/archive/master.zip

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
CODE 进阶 前端 jQuery