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 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

17710
来自专栏web前端教室

推荐10个常用的Vue UI库

最近搞vue的东西多一些,之前是用element的,就是饿了么搞的那个UI。然后想看看同学们都在用哪些Vue UI库,下面是查找的结果 ,

1475
来自专栏行者常至

002.css常用基础知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版...

701
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

581
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 基础概念

471
来自专栏coding

vue.js路由传参

781
来自专栏互联网软件技术

获取地理位置

563
来自专栏小狼的世界

jQuery的attr方法处理checkbox的问题

使用了 jQuery 1.10 的版本,想实现 checkbox 的全部选中和全部取消选中,使用了 attr 的方法,如下:

981
来自专栏coding

vue自定义transition样式前缀名

默认情况下,控制 transition 样式的类名是以 'v-' 为前缀,我们可以自定义前缀名

752
来自专栏十月梦想

前台模板underscore.js配合Ajax渲染页面数据

前几次介绍node的ejs后台模板进行数据渲染们今天简单介绍一下咱们前端的模板引擎underscore的数据渲染!

902

扫码关注云+社区