码迷,mamicode.com
首页 > 其他好文 > 详细

onepage scorll全屏滚动插件

时间:2016-07-28 15:31:41      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

onepage scorll全屏滚动插件,它能够很方便、很轻松的制作出单页/全屏滚动页面。兼容主流浏览器,懒人图库推荐下载!

 

使用方法:

1、head区域引用文件onepage-scroll.css,jquery.min.js,jquery.onepage-scroll.min.js及以下样式

.page1 { }

.page2 { background-color: #FF7F50;}

.page3 { }

.page4 { background-color: #f90;}

p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}

2、在文件中加入以下代码

<div class="main">

<div class="page page1">

<p class="title">第一屏</p>

</div>

<div class="page page2">

<p class="title">第二屏</p>

</div>

<div class="page page3">

<p class="title">第三屏</p>

</div>

<div class="page page4">

<p class="title">第四屏</p>

</div>

</div>

3 引入以下js代码

<script>

$(function(){

$(‘.main‘).onepage_scroll({

sectionContainer: ‘.page‘

});

});

</script>

onepage scorll全屏滚动插件

标签:

原文地址:http://www.cnblogs.com/zrsm/p/5714898.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!