仿谷歌主页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>
其实这动画不难,难在那种图片上,不知道这图片是怎么做出来的!!!
相关推荐
-
基于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实现超炫网页烟花动画效果的方法
本文实例讲述了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动画效果打开层 关闭层
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动画效果代码
实现的功能:移动,暂停,恢复,停止. 未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...) 代码中的使用方法如下: 复制代码 代码如下: var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ this.disabled = true; var that = this; $m.animate({left:"300px",top:"100px
-
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 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代码
下边我就简单说一下过程和原理.第一步:实现一个匿名函数并能自己执行. 复制代码 代码如下: (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数.第二步:实现动画,以改变一个box的秀明度来说明.id为animation的div 复制代码 代码如下: <div id="animation&
-
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动画效果实现代码
源代码: 复制代码 代码如下: <!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 仿余额宝数字跳动动画效果完整代码
一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 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模拟实现天猫购物车动画效果实例代码
一.功能描述: 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实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用.这种菜单 一般应用于大站,不过如果你的站点内容比较多,也是可以考虑的哦. 运行效果截图如下: 在线演示地址如下: 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实现仿今日头条点赞动画效果实例
目录 一.前言 二.需求拆分 三.实现方案 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
随机推荐
- Oracle将查询的结果放入一张自定义表中并再查询数据
- jquery+css实现下拉列表功能
- JS编写函数实现对身份证号码最后一位的验证功能
- 详解在spring boot中配置多个DispatcherServlet
- 解析微信支付的实现方法(.NET版)
- java必学必会之static关键字
- PHP实现路由映射到指定控制器
- python中self原理实例分析
- Python HTMLParser模块解析html获取url实例
- javascript编程起步(第四课)
- JS实现快速比较两个字符串中包含有相同数字的方法
- Python socket编程实例详解
- Shell脚本去重的几种方法实例
- 利用mysql事务特性实现并发安全的自增ID示例
- javascript showModalDialog 内跳转页面的问题
- JavaScript 原型学习总结
- jQuery.cookie.js使用方法及相关参数解释
- json数据与字符串的相互转化示例
- C++中图片重命名实现代码
- Node.js使用Angular简单示例