您的位置：首页 > Web前端 > JavaScript

js实现百度动态LOGO

2016-02-22 15:07 736 查看
百度动态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>


其中
logo_a5c3c8332558f4e2afafe351c4611716.png
是对应背景图片。

例：2016年2月22日元宵节
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 百度logo
相关文章推荐
新的分享
章节导航