码迷,mamicode.com
首页 > Web开发 > 详细

单页面滚动式网站模版开发

时间:2015-07-08 14:28:54      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

jQuery是当今最流行的JS框架,利用jquery我们可以开发出很多高效的demo和成果。与此同时jquery相关的插件也可以很方便的完成一些特效,例如jquery scrollTo插件,可以方便的完成滑动到指定位置操作。记住由于jquery scrollto插件是依赖于jquery而产生,所以在头部文件引用时先引用jquery文件

要点:(原文链接:http://www.gbtags.com/gb/share/5641.htm)

以导航标题为例展示

通过导航标题,进行检索可以点击进入相应部分

  1. <nav id="stickynav">
  2. <ul id="nav" class="clearfix">
  3. <li><a href="#topbar">主页</a></li>
  4. <li><a href="#about">关于我们</a></li>
  5. <li><a href="#photos">极客图集</a></li>
  6. <li><a href="#contact">联系我们</a></li>
  7. </ul>
  8. </nav>
 

 整个页面内容分为4个section,每个section展示不同的相关内容,根据ID名称当点击每个链接时会滑动到相应的位置,下面是其中一个section部分,此部分简单的显示一些内容语句,可以根据个人需求,编写相应代码

结构展示

  1. <section id="topbar" class="section">
  2. <h1>单页面滑动效果</h1>
  3. <p>单击每一个导航选项实现基本的滑动效果,其他页面的内容均是来自</p>
  4. </section>
 

 在同一张页面中涉及了以上4个模块,不想分页面展示,希望在一张页面中可以快速高效的查找到相关的内容,此时利用jquery scrollto插件的鼠标点击事件,执行相应的效果,代码如下,由于<a>链接本身拥有一个hash 属性,hash是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分).当点击导航按钮时,所以触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单 位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子: http://demos.flesler.com/jquery/scrollTo/

事件处理

  1. <script>
  2. $(function(){
  3. $("#nav a").click(function(e){
  4. e.preventDefault();
  5. $(‘html,body‘).scrollTo(this.hash,this.hash);
  6. });
  7. });
  8. </script>
 

<script>代码可以直接嵌入到html页面中,也可以书写成外部文件进行引入。

添加样式

最后依据个人的html中dom结构,书写相应的css代码,进行页面的美化,例如对导航标题进行美化,设计成类似按钮形状
  1. #stickynav #nav li { display: inline;}
  2. #stickynav #nav li a {
  3. display: block;
  4. float: left;
  5. margin-right: 8px;
  6. font-size: 1.5em;
  7. font-weight: 200;
  8. padding: 11px 8px;
  9. background: #ff9900;
  10. -webkit-border-radius: 4px;
  11. -moz-border-radius: 4px;
  12. border-radius: 4px;
  13. color: #ffffff;
  14. }
 

结束语

jQuery拥有很多灵活的小插件,可以帮助我们在工作的时候,少写很多的代码,而且维护成本低,有效的节省了时间。

如果有兴趣可以到社区的课程库进行更多的学习。

(原文链接:http://www.gbtags.com/gb/share/5641.htm)

喜欢前端技术的同学么,可以持续关注我的文章并且点击下面按钮关注本人哦,^_^,我们一起交流和进步~~~~  ,希望我的文章,请多多留言, 灌水就不必了,来点干货留言 ,嘿嘿~~

单页面滚动式网站模版开发

标签:

原文地址:http://www.cnblogs.com/kvhur/p/4629939.html

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