js实现百度动态LOGO

最新推荐文章于 2024-05-16 09:43:05 发布

j510924

最新推荐文章于 2024-05-16 09:43:05 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 百度logo

本文链接：https://blog.csdn.net/j510924/article/details/50717005

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

百度动态logo是通过循环改变div背景图片的位置，以达到动态的效果。

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>LOGO</title> 
<style type="text/css"> 
#banner { 
background: #52CCCC; 
cursor: move; 
} 
.content{
    height:100%;
}
html, body{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
div.moveBar { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}
</style> 
</head> 
<body style="padding-top: 50px;"> 

<div id="logo"  style="position: absolute; top: 0px; left: 50%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px; background: url(logo_a5c3c8332558f4e2afafe351c4611716.png) -0px 0px no-repeat;" title="花灯流转赏元宵"></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>