javascript - 这个js效果怎麽做到的呢?通常怎麽称呼?-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 这个js效果怎麽做到的呢?通常怎麽称呼?

阿神 2017-04-11 13:15:58

[JavaScript讨论组]

667

在visual studio code的官方首页看到这个效果

看了一下它的页面代码，是用一个p.mask先做了上下模煳的效果，裡面在放

做为每个文字的项目，但是它在ul那有写个 reactroot ，我试着将chrome的javascript功能关起来后那效果确实不能跑了。
```
.home .getting-started .mask {
    background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);
    z-index: 5;
    height: 100%;
    width: 100%;
    position: absolute;
    left: -20px;
}
```
也就是说这应该不是纯CSS的效果，而是利用js操作dom得出的效果，但具体怎麽实现我没办法从reac转es5的javascript代码段看出来，想请问大家这效果具体怎麽实现呢? 用纯 javascript或jquery都行，或者是设计思路。

谢谢各位

阿神

闭关修行中......

全部回复(4)

天蓬老师2017-04-11 13:17:58 4楼

瞎写的用了setInterval以及transition
css：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .home{
            box-sizing: border-box;
            padding: 100px;
            width: 650px;
            display: flex;
            margin: auto;
        }
       .home .title{
         height: 300px;
           width: 500px;
        }
        .title h2{
            line-height: 300px;
        }
        .home .ul-list{
            height: 300px;
            width: 500px;
            position: relative;
        }
        .mask{
            background: linear-gradient(180deg,#fff,hsla(0,0%,100%,0),hsla(0,0%,100%,0),#fff);
            z-index: 5;
            height: 100%;
            width: 100%;
            position: absolute;
            left: -20px;
        }
        .list{
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        ul{
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            transition: top 1s;
            box-sizing: content-box;
            padding-right: 20px;

            padding-left: 0;
            list-style: none;
            margin-bottom: 0;
        }
        ul li{
            font-size: 30px;
            height: 40px;
        }
    </style>

html：

<body>
<p class="home">
    <p class="title">
   <h2>VS Code for</h2>
    </p>
    <p class="ul-list">
        <p class="mask">

        </p>
        <p class="list">
            <ul id="list">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
                <li>666</li>
                <li>777</li>
                <li>888</li>
                <li>999</li>
                <li>10000</li>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
                <li>666</li>
                <li>777</li>
                <li>888</li>
                <li>999</li>
                <li>10000</li>
            </ul>
        </p>
    </p>

</p>
</body>

js：

<script>
    var timing=null;
      timing=setInterval(function () {
          addTop();
         console.log(parseInt($("#list").css('top')))
          if (parseInt($("#list").css('top'))<=-510){
//              clearInterval(timing)
              $("#list").css("top",0+'px')
          }
      },1500)
    addTop=function () {
        var num =parseInt($("#list").css('top'))
        $("#list").css("top",(num-30)+'px')
    }

</script>

赞 +0

添加回复

天蓬老师2017-04-11 13:17:58 3楼

其实就是底部一个滚动列表，上面盖一层带渐变的遮罩而已。

赞 +0

添加回复

PHPz2017-04-11 13:17:58 2楼

ul外面还包了个p。那个p限制了高度，并且设置了overflow:hidden。利用js动态改变ul的margin-top或者top,改成负值就可以向上移动了。

赞 +0

添加回复

ringa_lee2017-04-11 13:17:58 1楼

这个叫跑马灯，不过一般是横着的，这个是竖着的
用js每隔一定时间，把列表上移，可以把滚出可视区的条目重新添加到列表底部，或者把列表重复足够的次数保证滚动到一次循环的最后条目时，没有空白出现在可视区
有很多现成的包，比如http://kenwheeler.github.io/s...，参看的Autoplay的例子，无非是图片换成文字，水平换成垂直罢了

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>