[代码样式]用fullPage.js制作搜狐快站页面效果

[代码样式]用fullPage.js制作搜狐快站页面效果

近日搜狐推出了一款可视化快速建站工具——搜狐快站,利用该工具站长可通过在线的可视化页面编辑器简单生成自己的移动端站点。是继百度siteapp,腾讯风铃后又一互联网巨头推出的自助移动建站工具。

搜狐快站的页面效果还不错,也是采用时下比较流行的全屏设计(其实只是图片而已),今天 dowebok 试着用 fullPage.js 制作这个页面效果。

制作方法

1、HTML

左边放 logo 及菜单,右边放图片。

<div id="side">
    <div class="inner">
        <div class="hgroup">
            <h1><a href="###">搜狐快站</a></h1>
            <h2>专业的移动建站平台</h2>
        </div>
        <a class="start" href="###">开始建站</a>
    </div>
    <ul id="menu">
        <li class="active" data-menuanchor="page1">
            <a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点</a>
        </li>
        <li data-menuanchor="page2">
            <a class="a2" href="#page2" title="丰富的模板">丰富的模板</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3" href="#page3" title="强大的功能组件">强大的功能组件</a>
        </li>
        <li data-menuanchor="page4">
            <a href="#page4" href="#page4" title="多种屏幕预览">多种屏幕预览</a>
        </li>
        <li data-menuanchor="page5">
            <a href="#page5" title="全网告诉访问">全网告诉访问</a>
        </li>
    </ul>
</div>
<div class="section">
    <div class="imgbox">
        <img src="https://www.dowebok.com/images/img1.png" alt="快速创建移动站点">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="https://www.dowebok.com/images/img2.png" alt="丰富的模板">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="https://www.dowebok.com/images/img3.png" alt="强大的功能组件">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="https://www.dowebok.com/images/img4.png" alt="多种屏幕预览">
    </div>
</div>
<div class="section">
    <div class="imgbox">
        <img src="https://www.dowebok.com/images/img5.png" alt="全网告诉访问">
    </div>
</div>

2、CSS

我们用 position:fixed 固定左栏、logo 以及菜单,并且给菜单加上背景图片。

#side { position: fixed; left: 0; top: 0; z-index: 10; width: 300px; height: 100%; background-image: url(//s0.zhan.sohu.com/images/df-side.png);}
.inner { position: absolute; left: 50%; top: 50%; width: 226px; margin: -112px 0 0 -113px;}
.hgroup { width: 226px; height: 81px; margin: 0 auto; text-indent: -9999px; background-image: url(//s0.zhan.sohu.com/images/df-logo.png);}
.start { display: block; width: 186px; height: 56px; margin: 66px auto 0; text-indent: -9999px; overflow: hidden; background-image: url(//s0.zhan.sohu.com/images/df-start.png);}
#menu { position: absolute; right: -20px; top: 50%; width: 40px; margin-top: -170px; padding: 0; list-style-type: none;}
#menu li { float: left;}
#menu a { display: block; width: 28px; height: 28px; margin: 20px 6px; border-radius: 14px; text-indent: -9999px; overflow: hidden; background-color: #a0afb9; background-position: 50%; background-repeat: no-repeat;}
#menu .a1 { background-image: url(//s0.zhan.sohu.com/images/df-01.png);}
#menu .a2 { background-image: url(//s0.zhan.sohu.com/images/df-02.png);}
#menu .a3 { background-image: url(//s0.zhan.sohu.com/images/df-03.png);}
#menu .a4 { background-image: url(//s0.zhan.sohu.com/images/df-04.png);}
#menu .a5 { background-image: url(//s0.zhan.sohu.com/images/df-05.png);}
#menu a:hover, #menu .active a { margin: 14px 0; border: 6px solid #fff; box-shadow: 1px 1px 3px 1px #b4d7ed; border-radius: 20px; background-color: #239ae6;}
.section { margin-left: 300px; text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section .imgbox { margin-left: 300px;}
.section img { position: relative; left: -300px; display: block; margin: 0 auto;}

3、JavaScript

你了解 fullPage.js 的话,本例中的 JavaScript 就很简单了,设置一个背景颜色,绑定锚链接和菜单就可以了。

$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
        menu: '#menu'
    });
});

搜狐快站目前刚刚上线,官网也是第一版,之后改版是很正常的,只是时间问题,所以你看到的搜狐快站的页面可能与本例不一样。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery显示隐藏密码插件jquery.toggle-password

2020-10-27 14:47:19

脚本代码

[代码样式]把WordPress的分类转换成标签

2020-10-27 14:47:21

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索