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

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于ys3399盈丰国际官网网址的点点滴滴

比如有一幅图片(曾经加载好,
当加载进度为10%,这幅图片表现10%高度),
加载进度为50%时,这幅图片表现50%(高度),以此类推

讨教要怎样完成?

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

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

<!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>

基于这个改改就可以了。

(看完/读完)这篇文章有何感想! 来看看ys3399盈丰国际官网网址是怎么评论的吧!

--转载请注明: ys3399盈丰国际官网_www.ys3399.com_ys3399盈丰国际官网网址 » 如何写出js水平线上升加载效果?

发表评论

(必填)