jQuery是当今最流行的JS框架,利用jquery我们可以开发出很多高效的demo和成果。与此同时jquery相关的插件也可以很方便的完成一些特效,例如jquery scrollTo插件,可以方便的完成滑动到指定位置操作。记住由于jquery scrollto插件是依赖于jquery而产生,所以在头部文件引用时先引用jquery文件
要点:(原文链接:http://www.gbtags.com/gb/share/5641.htm)
以导航标题为例展示
通过导航标题,进行检索可以点击进入相应部分
- <nav id="stickynav">
- <ul id="nav" class="clearfix">
- <li><a href="#topbar">主页</a></li>
- <li><a href="#about">关于我们</a></li>
- <li><a href="#photos">极客图集</a></li>
- <li><a href="#contact">联系我们</a></li>
- </ul>
- </nav>
整个页面内容分为4个section,每个section展示不同的相关内容,根据ID名称当点击每个链接时会滑动到相应的位置,下面是其中一个section部分,此部分简单的显示一些内容语句,可以根据个人需求,编写相应代码
结构展示
- <section id="topbar" class="section">
- <h1>单页面滑动效果</h1>
- <p>单击每一个导航选项实现基本的滑动效果,其他页面的内容均是来自</p>
- </section>
在同一张页面中涉及了以上4个模块,不想分页面展示,希望在一张页面中可以快速高效的查找到相关的内容,此时利用jquery scrollto插件的鼠标点击事件,执行相应的效果,代码如下,由于<a>链接本身拥有一个hash 属性,hash是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分).当点击导航按钮时,所以触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单 位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子: http://demos.flesler.com/jquery/scrollTo/
事件处理
- <script>
- $(function(){
- $("#nav a").click(function(e){
- e.preventDefault();
- $('html,body').scrollTo(this.hash,this.hash);
- });
- });
- </script>
<script>代码可以直接嵌入到html页面中,也可以书写成外部文件进行引入。
添加样式
- #stickynav #nav li { display: inline;}
- #stickynav #nav li a {
- display: block;
- float: left;
- margin-right: 8px;
- font-size: 1.5em;
- font-weight: 200;
- padding: 11px 8px;
- background: #ff9900;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- color: #ffffff;
- }
结束语
jQuery拥有很多灵活的小插件,可以帮助我们在工作的时候,少写很多的代码,而且维护成本低,有效的节省了时间。
如果有兴趣可以到社区的课程库进行更多的学习。
(原文链接:http://www.gbtags.com/gb/share/5641.htm)
喜欢前端技术的同学么,可以持续关注我的文章并且点击下面按钮关注本人哦,^_^,我们一起交流和进步~~~~ ,希望我的文章,请多多留言, 灌水就不必了,来点干货留言 ,嘿嘿~~