动态背景图

Author： WillKwok
发布时间：June 27, 2020
797 views
No comments
733 words
Categories：文章

让背景图变成类似 gif 效果，仿百度 Logo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>LOGO</title>
    <style type="text/css">
    #logo {
        cursor:pointer;
        width:270px;
        height:129px;
    }
    </style>
</head>
<body>
    <div id="logo" style="background:url(bg.jpg) -0px 0px no-repeat;"></div>
    <script>
    window.setInterval("changeBackground()", 100);
    var IMAGE_WIDTH = 16470,//图片的宽度
    PER_WIDTH = 270,//每一帧的宽度
    MIN_WIDTH = -(IMAGE_WIDTH - 2 * PER_WIDTH);
    function changeBackground() {
        var logo = document.getElementById('logo'),
        backgroundPosition,
        left;
        backgroundPosition = logo.style.backgroundPosition;
        left = parseInt(backgroundPosition.split(' ')[0]);
        left = (left > MIN_WIDTH) ? (left - PER_WIDTH) : 0;
        logo.style.backgroundPosition = left + 'px 0px';
    }
    </script>
</body>
</html>

Last modification：June 27, 2020