使用jQuery做一个制作滚轮跟随(Scroll Follow)动画

嘎子 WordPress, 其他开发, 未分类 2017-01-16 720 次浏览 , 没有评论

本文首先给大家介绍一个开源的小工具,方便而实用。最后给大家发一个自己写的代码,可定制性高。

1、开源工具JQUERY SCROLL FOLLOW

开源工具下载地址如下:Open Source – Scroll Follow,这个工具非常简单,里面的介绍也基本能说明此工具的使用方法。

1.1、引用

此工具引用了jQuery (开发使用1.2.6)和jQuery UI Core (开发使用1.5.2)。如果使用擦除(一种动画方式)和Cookie(可以让浏览器记住之前的操作)还要引用jQuery Easing PluginjQuery Cookie Plugin

最终自己做了这个动画很大一部分原因是这个工具引用东西太多,而且实现自己使用的功能又有点复杂。

1.2、使用

下面的一段代码实现一个div(id为example)随滚轮移动,有60px的偏移。然后有一个链接(id为exampleLink),单击可以实现动画的开始与停止(单击链接的文字会在Disable Follow和Enable Follow之间改变)。

示例页面:Scroll Follow示例

1.3、参数

在前面的示例中已经使用了参数,共有如下几个参数:

speed
类型:int – 如果不指定则为500
动画两帧之间间隔,表示动画的速度,间隔越小速度越快。
easing
类型:string – 如果不指定则为’linear’
擦除动画的相关操作,默认为无。此功能需要使用jQuery Easing Plugin。

offset
类型:int – 默认为0
跟随对象的顶部偏移数

container
类型:string – 默认为其上一级对象(父对象)
包含对象的ID

killSwitch
类型:string – 默认为 ‘killSwitch’
打开关闭动画按钮的ID,此功能需要使用jQuery Cookie plugin。

onText
类型:string – 默认为 ‘Turn Slide Off’
当动画开启时killSwitch按键表现的文本。

offText
类型:string – 默认为 ‘Turn Slide On’
当动画停止时killSwitch按键表现的文本。

relativeTo
类型:string – 默认为 ‘top’
滚轮跟随动画可以相对于’top’(顶部)或’bottom’(底部)。

delay
类型:int – 默认为 0
动画开始前的延迟。

1.4、自己使用遇到的问题

1、jQuery的引用。自己使用的主题中也引用了jQuery,版本不一样,出现了冲突。自己做了很多工作解决了这个问题,解决方案如下:

2、动画停止问题。动画需要停止时,非常不方便。最终自己想了一个折衷的方法,做了几个不显示display:none的按钮,程序自动点击,并用一个变量记录动画的开始与停止。

3、动画过程中参数的更改问题。动画开始后如果再要对参数(比方说offset)进行改变,非常不便。自己现在还没有想到合适的方法。所以就开始自己写一个这个动画了,也非常简单。

2、自己开发的滚轮跟随动画

2.1、jQuery的动画函数

animate(params, [duration], [easing], [callback])

params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

duration (可选)三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”。

callback (可选)Function在动画完成时执行的函数。

下面是一段示例代码:

2.2、滚轮跟随动画的编写

先给出自己写的代码:

这就可以了吗?你错了,下面看看本博客用的动画代码:

具体的细节我在这里就不多说了,有问题的话可以问我,也可以直接调试本页,看看具体是怎么运作的。

2.3、注意的问题

上面的parent就是要限制于某个对象中,上面就直接使用的是父对象,也可以自己选择其他的对象。

第4-15行代码,如果parent是固定不动的,也可以放到scroll事件外面,这样效率更高一些。如果parent位置也变动,主些代码一定要放入scroll事件中。

如果要使用类似于offset效果,就需要对topPs进行更改。

好了,就这样吧,如果有其他需要了解的可以给我留言。

原创文章,转载请注明: 转载自TsonTec:测量解决方案提供者

本文链接地址: 使用jQuery做一个制作滚轮跟随(Scroll Follow)动画

相关主题

  • Git使用心得之在线管理2016-03-01 Git使用心得之在线管理 (0)
    本文是在Git使用心得之Git与GitHub的关系和Git使用心得之本地管理两篇文章的基础上进行的,有不明白的可以参照上面两篇文章。 首先给 […]
  • 分享一下现在的自用主题:Blue Tson2017-01-12 分享一下现在的自用主题:Blue Tson (21)
    6、版本更新 6.1 Blue-Tson V1.2 应大家的要求,我将Blue […]
  • Google AMP移动网页加速显示技术的一些想法2017-03-24 Google AMP移动网页加速显示技术的一些想法 (5)
    这几天看到土木坛子一连写了几篇关于AMP的博客,对于一个技术宅来说怎么能不仔细的研究一下呢? 首先按照自己的理解描述一下AMP吧,就是Google推出的 […]
  • 多说关闭-有什么好的替代-wpDiscuz2017-03-22 多说关闭-有什么好的替代-wpDiscuz (17)
    今天一早打开网站,收到一个很遗憾的消息,多说要关闭了:重要通知: 多说即将关闭 - […]
  • Perst的“关系型数据库封装”2017-01-07 Perst的“关系型数据库封装” (0)
    看到这个标题,大家可能会觉得很奇怪,Perst明明说是一个面向对象的数据库,为什么要有“关系型数据库封装”呢?像常见的程序一样,一般需要向下兼容,如果你之前精 […]
  • Leica全站仪补偿器及船上测量相关问题2016-04-27 Leica全站仪补偿器及船上测量相关问题 (0)
    最近使用了Leica全站仪TS30进行了船上测量,遇到了一个问题:Yamal项目的第三方Fugro公司在进行船上测量时他们只关闭了“补偿器”,并没有关闭“水平 […]

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz
回顶部