javascript

位置:IT落伍者 >> javascript >> 浏览文章

仿谷歌主页js动画效果实现代码


发布日期:2018年10月21日
 
仿谷歌主页js动画效果实现代码
昨天看到谷歌的主页上出现了几个动画发现不是flash做的而是用js+图片实现的!今天把拷贝到的图片用js实现了动画效果!

源代码

复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>谷歌主页动画</title>
<style type="text/css">
animate{
height:px;
width:px;
background:url(images/gumbygumbyjpg) norepeat;
backgroundposition:px center;
}
</style>
<script type="text/javascript" src="
<script type="text/javascript">
$(function(){
var offset = ;
$(#start)click(function(){
var timer = setInterval(function(){
offset += ;
$(#animate)css({
backgroundposition:offset + px center
});
if(offset > ){
clearInterval(timer);
}
});
$(this)hide();
});
});
</script>
</head>
<body>
<div id="animate" class="animate"></div>
<a id="start" href="javascript:void()">动起来吧!</a>
</body>
</html>


其实这动画不难难在那种图片上不知道这图片是怎么做出来的!!!

上一篇:JS无限极树形菜单,json格式、数组格式通用示例

下一篇:js判断屏幕分辨率的代码