前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery右侧滑动快速导航条

jQuery右侧滑动快速导航条

作者头像
benny
发布2018-03-06 18:30:27
5.3K0
发布2018-03-06 18:30:27
举报

平时浏览网站的时候要是网站很长,滑下来后还要返回到开头部分的header来点击导航就显得很不方便,在这里使用JQ来实现右侧的滑动导航条,先来看看效果图吧:

使用jq其实也比较简单啦:你先弄好相应的css样式和html代码,接着直接插入jquery.min.js,然后调用插件。

css样式

html代码

js代码

jQuery 效果 - animate() 方法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态.

代码语言:javascript
复制
$(selector).animate(styles,speed,easing,callback)

styles:必需,规定产生动画效果的css样式和值

speed:可选,规定动画的速度

easing:可选,规定在不同的动画点中设置动画速度的easing函数

callback:可选,animate函数执行完成后,要执行的函数。

相信你们能看懂这些代码,理解起来不难的,真正难的是直接写出来哦,不懂的可以直接百度呢!。

(原文写于2017.8.18)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-09-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员的碎碎念 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery 效果 - animate() 方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档