jQuery右侧滑动快速导航条

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

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

css样式

html代码

js代码

jQuery 效果 - animate() 方法

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

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

$(selector).animate(styles,speed,easing,callback)

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

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

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

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

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

(原文写于2017.8.18)

原文发布于微信公众号 - 程序员的碎碎念(gh_53e607dd4782)

原文发表时间:2017-09-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

如何操作DOM树?——“查询”

上一篇文章,我们写了关于《如何学习DOM?》的问题,指出DOM树的操作无非就是增删改查,那么,现在我们就来聊聊如何“查询”DOM树中的节点对象。 ? 如果想要操...

2119
来自专栏python3

tkinter -- RadioButton

Radiobutton 为单选按钮,即在同一组内只能有一个按钮被选中,每当选中组内的一个按钮时,其它的按钮自动改为非选中态,与其他控件不同的是:它有组的概念

771
来自专栏xingoo, 一个梦想做发明家的程序员

CSS 之 选择器

选择器 类型选择器 也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。 p { color:red; } 类选择器 一般用于某些同类型的样式。 .xxx...

2029
来自专栏专业duilib使用+业余界面开发

duilib的Combo控件滚动条不显示的问题

2604
来自专栏流柯技术学院

selenium切换窗口后定位元素出现问题的解决方案

在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定。

5362
来自专栏快乐八哥

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

1898
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1513
来自专栏smy

谷歌调试工具选取元素选择不到页面的具体元素问题

z-index的问题 document的默认值是0. 一旦出现这种问题,检查下是否对大背景设置了z-index:-1; 如果设置了这个,那么所有的被设元素的内容...

2665
来自专栏JAVA后端开发

vue中对el-dialog宽度调整方法之一二

vue时,会用到el-dialog做为弹窗,但这个弹窗的宽度默认为50%.因项目中需要调整弹偿的宽度,需要设置其属性。 尝试过程如下:

2.8K1
来自专栏九彩拼盘的叨叨叨

学习前端第6周第4天

612

扫码关注云+社区