仿谷歌主页js动画效果实现代码_Javascript教程-查字典教程网
仿谷歌主页js动画效果实现代码
仿谷歌主页js动画效果实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:源代码:复制代码代码如下:谷歌主页动画.animate{height:156px;width:97px;background:url(ima...

源代码:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>谷歌主页动画</title>

<style type="text/css">

.animate{

height:156px;

width:97px;

background:url(images/gumby11-gumby.jpg) no-repeat;

background-position:-15581px center;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

var offset = -15678;

$('#start').click(function(){

var timer = setInterval(function(){

offset += 98;

$('#animate').css({

'background-position':offset + 'px center'

});

if(offset > 0){

clearInterval(timer);

}

},50);

$(this).hide();

});

});

</script>

</head>

<body>

<div id="animate"></div>

<a id="start" href="javascript:void(0)">动起来吧!</a>

</body>

</html>

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类