JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言。由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正。
前言
在我自学JavaScript的时候,一直想实现类似安卓手机状态栏那种下拉上滑效果。在网上搜索一番后,我知道了jQuery的slideUp()和slideDown()方法。这两个方法让我很着迷,我迫不及待知道他是如何实现的。可当我尝试在网上寻找答案时,得到答案几乎都是:你去看jQuery源码不就知道了吗?于是我就去看了jQuery源码,但是面对几万行代码,让我望而却步。所以至今我也不知道slideUp()和slideDown()这两个方法在jQuery中到底是怎样实现的。
第一次尝试
在进一步学习JavaScript后,我了解了setTimeout和setInterval,并知道可以利用它们来逐渐的改变元素的属性,以此达到动画效果。于是我开始着手借助setInterval来实现我自己的下拉上滑效果。让我们以下面的HTML代码为基础,开始聊聊我的第一次实现:
文件名:Silder.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slider</title>
</head>
<body>
<button id="btn">Button</button>
<div id="panel" style="width:600px;height:400px;background:red;"></div>
<script src="Slider.js"></script>
</body>
</html>
上面代码布局很简单,会显示一个id为btn的按钮;和一个宽为600px,高为400px,背景为红色,id为panel的div。最后我引入了一个文件名为Slider.js的JavaScript文件,这个文件目前还未创建,我将在下面给出。
为了方便描述,我把id为btn的按钮简记为btn,同理也把红色div简记为panel。
现在我想实现一个效果:当我点击btn时,如果panel当前可见,就执行一个上滑动画来将它慢慢收起,从而让它变成不可见;如果当前不可见,那就执行一个下拉动画将它慢慢展开,从而让它变成可见。整个流程如下: