下移动画

最后更新时间: 2018-08-06 | 作者: AberSheeran | 捐助

在使用JQ的fadeIn()的时候,发现了它是通过指定元素的透明度来实现的。然后就自己玩了一下JS动画制作

setTimeout

虽然这个函数名带timeout,但是设置的却是在指定时间之后异步执行任务。
其函数定义的伪代码为setTimeout(handler, timeout=0, *args)

由于JS的设定,handler需要使用当前的外部变量时,需要将变量传入handler,否则会因为外部变量的变化导致程序无法正常运行。

setInterval

这个函数的使用方式和setTimeout一致,也有对应的清理函数clearInterval。但和setTimeout的区别是,它是每隔指定时间执行一次。


滑动动画,需要让元素不断地移动。思来想去也只有position: absolute;可以做到了。滑动层使用绝对定位,而它的父元素使用relative

放置鼠标
滑动区域
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div id="example_0">
    放置鼠标
    <div id="example_1">
        滑动区域
    </div>
</div>

<style>
#example_0{
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    overflow: hidden;
    background-color: aliceblue;
}
#example_1{
    position: absolute;
    top: -200px;
    bottom: 200px;
    left: 0;
    right: 0;
    background-color: red;
}
</style>

<script src="/STATIC/script/jQuery.3.2.1.min.js"></script>
<script>
var max_time = 1000,
    time_step = 50;
var task,
    init_size = parseInt($("#example_1").css("top").split("px")[0]);

$("#example_0").bind({
    "mouseleave": function () {
        clearInterval(task);
        $(this).children("#example_1").css("top", init_size + "px");
        $(this).children("#example_1").css("bottom", -init_size + "px");
    },
    "mouseenter": function () {
        task = setInterval(function (self) {
            let num_px = parseInt(self.children("#example_1").css("top").split("px")[0]);
            if (num_px != 0) {
                let num = num_px - init_size * time_step / max_time;
                self.children("#example_1").css("top", num + "px");
                self.children("#example_1").css("bottom", -num + "px");
            }
            else {
                clearInterval(task);
            }
        }, time_step, $(this));
    }
});
</script>
收录于#杂记