实现页面图片滑块效果

滑动图标

引人眼球的页面总需要一些酷酷的功能，下面为大家带来“图标滑块”的功能实现。先看效果：http://pages.mlxgc.top/。

“图标滑块”的功能实现非常简单，主要是使用JavaScript控制translate实现跟随窗体的滑动效果。

1.页面内容

首先，我们先在页面中将用来实现该功能的图标放入页面中，并为每个部分加上对应的class。

<div class="div-box">
    
    <div class=" container-el">
        <div class="diy-row ">
            <div class="diy-col">
                <img src="img/html.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/css.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/javascript.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/bootstrap.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/vue.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/html.png" class="diy-img" />
            div>
        div>
        <div class="diy-row">
            <div class="diy-col">
                <img src="img/java.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/mysql.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/mybatis.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/nginx.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/linux.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/java.png" class="diy-img" />
            div>
        div>
        <div class="diy-row">
            <div class="diy-col">
                <img src="img/python.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/git.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/py4.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/py3.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/py2.png" class="diy-img" />
            div>
            <div class="diy-col">
                <img src="img/python.png" class="diy-img" />
            div>
        div>
    div>
div>
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
55
56
57
58
59
60
61
62
63
64
65

2.添加样式

为页面添加一些样式，让内容以正确的样式显示，并且定义css变量：--tranHeight，并为需要偏移的块元素.container-el设置默认偏移量

body{
    --tranHeight:0px;/*定义变量，并初始化*/
    margin: 0;
    padding: 0;
    width: 100vw;
    overflow-x:hidden;/*防止页面x反向发生溢出*/
}
.div-box{
    width: 100vw;/*设置父元素的显示宽度为100%*/
    overflow-x:hidden;/*防止块元素x反向发生溢出*/
}
.diy-row{
    display: flex;
    width: 1000px;/*防止图片的块元素长度为1000px，仅需保证图片内容可以被完全容纳即可*/
    margin-bottom: 35px;
}
.diy-col{
    width: 150px;
}
.diy-img{
    width: 40%;
}
.container-el{
    translate:var(--tranHeight)/*设置图片内容的默认偏移量*/
}
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

最后，也是最重要的，就是使页面的内容，跟随页面滑动动起来：

1）我们需要获取页面的高度，保证我们对高度的操作合理

var theHight = document.body.clientHeight  //此处为示例代码，有优化选项，此处不再赘述
1

2）获取用于滑动的块元素的dom

//获取dom元素，方便后续操作
var con =document.getElementsByClassName("container-el")[0]
1
2

3)重写window.onscroll函数，当页面发生上下滑动时，改变在css中定义的变量--tranHeight的值，实现“滑动图标”效果。其中，window.scrollY是当前页面的下滑高度，1.6是控制滑动快慢的值，根据需要调整

注意：setProperty函数详细见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties#javascript_%E4%B8%AD%E7%9A%84%E5%80%BC

window.onscroll = function() {
    //部分浏览器不支持该函数，可以使用替代函数：
    //con.style.transform= 'translate('+(-window.scrollY)/1.6+'px)'
    con.style.setProperty("--tranHeight", (-window.scrollY)/1.6+'px');
}
1
2
3
4
5

4)在页面最前和最后，加上具有高度的块元素，使页面可以滑动

<div style="height: 500px;">div>
1

到此，滑动效果就实现啦，为大家提供示例：
http://pages.mlxgc.top/