平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”。
更简单点的实现方法:
代码只有一句话
animate()方法用来实现一组css的自定义动画,有两种调用方法
第一种形式接受4个参数,如下所示
.animate( properties [,duration] [,easing] [,complete] )
properties – 一个包含样式属性及值的映射 duration – 可选的速度参数,既可以是预置的字符串,也可以是一个毫秒数值 easing – 可选的缓动类型,jquery默认的只有两种:swing和linear,要使用其它效果需要安装缓动类的插件 complete – 可选的回调函数,在动画结束时被调用
第一种形式的示例如下
$("html,body")代表对html或body元素进行动画,即要改变他们的css属性值 scrollTop是要改变的属性值,表示滚动条滑过的距离,在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度 $("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度,它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。 1000是指动画时间为1秒
.animate( properties,options )
一个是属性映射,一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中,同时又添加了两个选项。第二种形式的代码如下:
以上所述就是本文的全部内容了,希望大家能够喜欢。
原文地址:https://www.jb51.cc/jquery/54390.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。