【前端艺术】html5和css3响应式全屏滚动页面切换源码

用户5997198

发布于 2019-08-21 18:09:44

2.6K0

发布于 2019-08-21 18:09:44

文章被收录于专栏：蚂蚁开源社区蚂蚁开源社区

这是一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。

HTML

wrapper div的class为st-container，里面包含作为导航按钮的radio和用于页面切换的面板st-scroll。

<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1" />
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2" />
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3" />
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4" />
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5" />
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">

<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon="H"></div>
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
<p>
<a class="htmleaf-icon icon-home" href="http://www.zzfriend.com/" title="蚂蚁HTML5社区" target="_blank"><span> 蚂蚁HTML5社区</span></a> |
<a class="htmleaf-icon icon-arrow-right3" href="http://www.zzfriend.com/h5game/" title="蚂蚁HTML5社区手机游戏" target="_blank"><span> 蚂蚁HTML5社区手机游戏</span></a>
</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-deco" data-icon="2"></div>
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-deco" data-icon="B"></div>
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-deco" data-icon="x"></div>
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon="Ç"></div>
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div>
</div>
</div>

我们要做的事情是改变面板的高度值，使点击导航按钮时相应的面板显示在屏幕上。可以通过兄弟选择器来在按钮点击时获取正确的面板。我们需要radio按钮和st-scroll在dom结构的同一层上，并且要在超链接的上部（超链接的透明度将会被设置为0，使其不可见）。为了正确选择面板，我们还要给每个面板和radio按钮一个id。

引入CSS代码

<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

阅读原文-演示/下载源码，还有更多更好玩的开源代码等你哦！