查看: 3174|回复: 14

[HTML5模板] html5和css3响应式全屏滚动页面切换源码

[复制链接]
发表于 2015-11-16 09:56:22 | 显示全部楼层 |阅读模式
wer.gif   


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




html5和css3响应式全屏滚动页面切换源码

html5和css3响应式全屏滚动页面切换源码


HTML

wrapper div的class为st-container,里面包含作为导航按钮的radio和用于页面切换的面板st-scroll。
  1. <div class="container">
  2. <div class="st-container">
  3. <input type="radio" name="radio-set" checked="checked" id="st-control-1" />
  4. <a href="#st-panel-1">Serendipity</a>
  5. <input type="radio" name="radio-set" id="st-control-2" />
  6. <a href="#st-panel-2">Happiness</a>
  7. <input type="radio" name="radio-set" id="st-control-3" />
  8. <a href="#st-panel-3">Tranquillity</a>
  9. <input type="radio" name="radio-set" id="st-control-4" />
  10. <a href="#st-panel-4">Positivity</a>
  11. <input type="radio" name="radio-set" id="st-control-5" />
  12. <a href="#st-panel-5">Passion</a>
  13. <div class="st-scroll">

  14. <section class="st-panel" id="st-panel-1">
  15. <div class="st-deco" data-icon="H"></div>
  16. <h2>Serendipity</h2>
  17. <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
  18. <p>
  19. <a class="htmleaf-icon icon-home" href="http://www.zzfriend.com/" title="蚂蚁HTML5社区" target="_blank"><span> 蚂蚁HTML5社区</span></a> |
  20. <a class="htmleaf-icon icon-arrow-right3" href="http://www.zzfriend.com/h5game/" title="蚂蚁HTML5社区手机游戏" target="_blank"><span> 蚂蚁HTML5社区手机游戏</span></a>
  21. </p>
  22. </section>
  23. <section class="st-panel st-color" id="st-panel-2">
  24. <div class="st-deco" data-icon="2"></div>
  25. <h2>Happiness</h2>
  26. <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
  27. </section>
  28. <section class="st-panel" id="st-panel-3">
  29. <div class="st-deco" data-icon="B"></div>
  30. <h2>Tranquillity</h2>
  31. <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
  32. </section>
  33. <section class="st-panel st-color" id="st-panel-4">
  34. <div class="st-deco" data-icon="x"></div>
  35. <h2>Positivity</h2>
  36. <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
  37. </section>
  38. <section class="st-panel" id="st-panel-5">
  39. <div class="st-deco" data-icon="Ç"></div>
  40. <h2>Passion</h2>
  41. <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
  42. </section>
  43. </div>
  44. </div>
  45. </div>
复制代码


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

引入CSS代码

  1. <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
  2. <link rel="stylesheet" type="text/css" href="css/default.css" />
  3. <link rel="stylesheet" type="text/css" href="css/demo.css" />
  4. <link rel="stylesheet" type="text/css" href="css/style.css" />
复制代码



游客,如果您要下载源码或者查看隐藏内容请回复



回复

使用道具 举报

发表于 2018-1-24 08:56:32 | 显示全部楼层
看起来很不错,谢谢楼主分享!!!
回复 支持 反对

使用道具 举报

发表于 2018-10-10 17:57:33 | 显示全部楼层
香港 美国 日本 韩国 G口!海内外高防服务器租用

欢迎咨询QQ39651882 支持免费测试! 另有国内全新机房全新IP!
回复 支持 反对

使用道具 举报

发表于 2018-10-21 15:41:16 | 显示全部楼层
6666666666666666
回复 支持 反对

使用道具 举报

发表于 2018-12-22 10:18:51 | 显示全部楼层
路过,谢谢楼主分享
回复 支持 反对

使用道具 举报

发表于 2019-1-4 14:04:11 | 显示全部楼层
谢谢分享谢谢分享谢谢分享谢谢分享谢谢分享谢谢分享谢谢分享
回复 支持 反对

使用道具 举报

发表于 2019-5-9 17:41:43 | 显示全部楼层
这里有更详细的教程
https://item.taobao.com/item.htm?id=592401235587&scene=taobao_shop
回复 支持 反对

使用道具 举报

发表于 2019-5-19 14:09:32 | 显示全部楼层
谢谢分享,是好东西,赞
回复 支持 反对

使用道具 举报

发表于 2019-6-11 23:03:44 | 显示全部楼层
试试看把感觉应该挺好用的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表