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

源代码：


代码如下:

<!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" class="animate"></div>
 <a id="start" href="javascript:void(0)">动起来吧！</a>
</body>
</html>

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

赞 (0)

相关推荐

  • 实现动画效果核心方式的js代码

    下边我就简单说一下过程和原理.第一步:实现一个匿名函数并能自己执行. 复制代码 代码如下: (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数.第二步:实现动画,以改变一个box的秀明度来说明.id为animation的div 复制代码 代码如下: <div id="animation&

  • 基于jQuery的烟花效果（运动相关）点击屏幕出烟花

    基于jQuery的烟花效果（运动相关）点击屏幕出烟花

    效果图 核心代码: 复制代码 代码如下: $(function(){ $(document).click(function(event){ /*1.创建DIV并插入到body当中 *2.设置其初始位置:TOP为屏幕的高度,left为鼠标点击时,鼠标的pageX值: */ //创建DIV var $div = $("<div/>"); var eLeft = event.pageX; var etop = event.pageY; var cHeight = document

  • 一个简单的js动画效果代码

    实现的功能:移动,暂停,恢复,停止. 未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...) 代码中的使用方法如下: 复制代码 代码如下: var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ this.disabled = true; var that = this; $m.animate({left:"300px",top:"100px

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • JS动画效果代码3

    慢慢来,这次实现了向任意方向扩展! 复制代码 代码如下: <!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>  &l

  • js螺旋动画效果的具体实例

    js螺旋动画效果的具体实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=GB18030&

  • js动画效果打开层 关闭层

    DOM_text01 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:

  • js动画效果制件让图片组成动画代码分享

    复制代码 代码如下: <!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="

  • JS动画效果代码2

    Untitled Document function $(pId){ return document.getElementById(pId); } function JPos(){ } JPos.getAbsPos = function(pTarget){ var _x = 0; var _y = 0; while(pTarget.offsetParent){ _x += pTarget.offsetLeft; _y += pTarget.offsetTop; pTarget = pTarget

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

    源代码: 复制代码 代码如下: <!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=&

  • Android 仿余额宝数字跳动动画效果完整代码

    Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

  • Android仿打开微信红包动画效果实现代码

    首先看下效果: 实现原理: 准备3张不同角度的图片,通过AnimationDrawable帧动画进行播放即可 代码实现: 1.编写动画xml文件: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false&

  • 图片的左右移动，js动画效果实现代码

    图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 九种原生js动画效果

    在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • jQuery模拟实现天猫购物车动画效果实例代码

    jQuery模拟实现天猫购物车动画效果实例代码

    一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:

  • jQuery实现美观的多级动画效果菜单代码

    jQuery实现美观的多级动画效果菜单代码

    本文实例讲述了jQuery实现多级动画效果菜单代码.分享给大家供大家参考.具体如下: 这是基于jQuery实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用.这种菜单 一般应用于大站,不过如果你的站点内容比较多,也是可以考虑的哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-animate-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 通过jquery实现页面的动画效果(实例代码)

    有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

  • Android实现仿今日头条点赞动画效果实例

    Android实现仿今日头条点赞动画效果实例

    目录 一.前言 二.需求拆分 三.实现方案 1.点赞控件触摸事件处理 2.点赞动画的实现 2.1.点赞效果图片的获取和存储管理 2.2.点赞表情图标动画实现 2.3.点赞次数和点赞文案的绘制 3.存放点赞动画的容器 4.启动动画 四.遇到的问题 五.实现效果 六.完整代码获取 七.参考和感谢 总结 一.前言 我们在今日头条APP上会看到点赞动画效果,感觉非常不错,正好公司有点赞动画的需求,所以有了接下来的对此功能的实现的探索. 二.需求拆分 仔细观察点赞交互,看出大概以下几个步骤: 1:点赞控件

  • JS动画效果打开、关闭层的实现方法

    本文实例讲述了JS动画效果打开.关闭层的实现方法.分享给大家供大家参考.具体如下: <!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"> <h

随机推荐