JavaScript笔记(24)

今天下午又把轮播图自己做了一遍,比我想象中其实简单很多,只是昨天听老师讲的时候觉得特别难,很多方法也是第一次接触.自己动起手来其实还可以,虽然也踩了些坑,但还是自己解决了,列出提纲真的很重要!

现在开始今天的学习

节流阀

回顾我们上一节做的轮播图,如果我们连续点击轮播图的箭头,就会导致播放过快.

节流阀目的: 当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发

核心实现思路: 利用回调函数,添加一个变量来控制,锁住函数和解锁函数

if (flag) {flag = false; do something} 关闭水龙头

利用回调函数 动画执行完毕, flag = true

做了一下:

无论点多快,都只能等待播放完才能轮到下一张

还记得我们之前写的animate函数,里面有个地方可以改进

两个框的含义是完全相同的.

这是因为短路运算 ''逻辑与'' 如果都为true,才会返回true

让我们回顾一下以前的知识: 短路运算

表达式1 || 表达式2，只要任意表达式为true，则整个表达式的运算结果为true。 表达式1 && 表达式2，只有所有表达式都为true，则整个表达式的运算结果才为true。

现在轮播图就是正式结束啦,不过老师说这应该是最后一次写了哈哈哈,因为以后都会用框架嘻嘻,不过原理还是要懂的.

本文由“壹伴编辑器”提供技术支持

现在做淘宝的案例:返回顶部

滚动窗口至文档的特定位置

window.scroll(x,y)

这是之前写的淘宝侧边栏的页面:

注意:里面的x和y是不用加单位的!

但是这种返回顶部过于生硬,没有动画效果,我们怎么让他像动画一样的滚动呢?

还是要用到我们之前封装的函数,但是需要稍加修改.

看看现在的效果:

优雅!!!

下面又是一个案例:

不过实在是有点丑哈....

挺好玩的这个,现在学习一下

做完了,虽然很简单,但是也是需要绕点弯...现在分析一下

现在做的是的当鼠标经过时和移开时云朵的动画,这一步很简单吧,记得要写在循环里.

现在我们要做最后一个效果,就是当鼠标点击过后,云朵要停在点击的li上.

如果我们添加一个点击事件:

虽然我们点击了,但是当鼠标移开的时候还是会回到原点,因为我们鼠标离开事件会让云朵回到0的位置.所以这个写法是错的

我们不妨自己定义一个变量.在一开始为0,在点击以后,就把距离储存下来,将点击的li的位置作为原点,鼠标离开时也会回到点击的li上.

当我们点击了某个li时,将他距离左侧的位置储存在current中:

最后再将鼠标离开事件的还原的位置改成current,这样鼠标点击后current就会变化,还原的位置也会变成点击后的位置.

看看效果如何吧(不得不说真的挺丑的):

结束啦,又要学习新的东西了

后面又是新的部分,就开新的一篇写吧