如何写出js水平线上升加载效果？

chenxxzhe

83520104125

发布于
2016-10-26

比如有一幅图片（已经加载好)，
当加载进度为10%，这幅图片显示10%(高度），
加载进度为50%时，这幅图片显示50%（高度），以此类推

请问要如何实现？

前端 javascript

阅读 3k

2 个回答

得票最新

linong

29.2k1369137

发布于
2016-10-26

overflow:hidden。然后你控制高度就可以了

<div style="overflow:hidden"><img></div>

scort

8.4k2633

发布于
2016-10-26

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" ></script>
    </head>
    <body>
        <div class="timer" style="width:600px;height:400px;border:1px solid;position:absolute;overflow:hidden;">
            <img src="http://i1.piimg.com/4851/be1e431726478b9a.png" width="100%"  height="100%" />
            <div class="bg" style="width:100%;height:100%;position:absolute;background:white;top:0;left:0;"></div>
        </div>
    </body>

    <script>
    $(function(){
        $('.bg').animate({top:'100%'},5000);            
    })
    </script>
</html>

基于这个改改就可以了。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

如何写出js水平线上升加载效果？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

Next.js做纯前端是否可行？

请问开发React Native，一般是推荐哪个主流的UI库呢？