加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

google谷歌首页的动画效果

[日期:2008-06-03] 作者: 来源: [字体: ]
     上周五抽空实现了一下谷歌首页(其实是韩国google先搞的)的动画效果,感觉挺有意思,在这里和大家分享下。
  
  这个效果的思路蛮有趣的,是一个类似于我们小时候翻书动画(也叫走马灯?)的效果,将一张大的png图片每次显示一部分。
  
  说明一下,我的实现没有google的那样精致,它最后还有一个返回一点的效果。我为了简单,省略了,呵呵。
  
  首先,这是google用的素材图片:
  
  这是我的素材图片:
  
  区别就在于我把最后那条边裁了,就没有那一小点回退的效果了
  
  然后是容器的CSS
  
  <style type="text/css">
   .animator_containter{}{
   margin: 0.5em auto;
   background: transparent url(ani.png) no-repeat scroll 0px 0px ;
   width: 52px; /*每次显示部分png图片的宽度*/
   height: 37px; /*每次显示部分png图片的高度*/
   cursor: pointer;
   -moz-background-clip: -moz-initial;
   -moz-background-origin: -moz-initial;
   -moz-background-inline-policy: -moz-initial;
   }
   </style>
  然后是namespace和常用方法:
  
  /**//**
   * @author wjjin
   */
  
  
  if (typeof(geekeesjs) == "#ff0000")
   _geekees = geekeesjs = {};
  
  function $() {
   var elements = new Array();
   for (var i = 0; i < arguments.length; i++) {
   var element = arguments[i];
   if (typeof element == 'string')
   element = document.getElementById(element);
   if (arguments.length == 1)
   return element;
   elements.push(element);
   }
   return elements;
  }
  接着是一个Timer的类,用来在oo的编程方式下管理setTimeout和setInterval,这个类真的很实用,是偶尔发现的,出处忘了,对作者说个不好意思。
  
  //Updated 4/18/2003: Footprint decreased, minor code improvements.
  //Updated 5/3/2003: Minor comment clarification; no code changes.
  //Updated 5/10/2003: Minor code improvements.
  // The constructor should be called with
  // the parent object (optional, defaults to window).
  
  function Timer(){
   this.obj = (arguments.length)?arguments[0]:window;
   return this;
  }
  
  // The set functions should be called with:
  // - The name of the object method (as a string) (required)
  // - The millisecond delay (required)
  // - Any number of extra arguments, which will all be
  // passed to the method when it is evaluated.
  
  Timer.prototype.setInterval = function(func, msec){
   var i = Timer.getNew();
   var t = Timer.buildCall(this.obj, i, arguments);
   Timer.set[i].timer = window.setInterval(t,msec);
   return i;
   }
   Timer.prototype.setTimeout = function(func, msec){
   var i = Timer.getNew();
   Timer.buildCall(this.obj, i, arguments);
   Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
   return i;
  }
  
  // The clear functions should be called with
  // the return value from the equivalent set function.
  
  Timer.prototype.clearInterval = function(i){
   if(!Timer.set[i]) return;
   window.clearInterval(Timer.set[i].timer);
   Timer.set[i] = null;
   }
   Timer.prototype.clearTimeout = function(i){
   if(!Timer.set[i]) return;
   window.clearTimeout(Timer.set[i].timer);
   Timer.set[i] = null;
  }
  
  // Private data
  
  Timer.set = new Array();
  Timer.buildCall = function(obj, i, args){
   var t = "";
   Timer.set[i] = new Array();
   if(obj != window){
   Timer.set[i].obj = obj;
   t = "Timer.set["+i+"].obj.";
   }
   t += args[0]+"(";
   if(args.length > 2){
   Timer.set[i][0] = args[2];
   t += "Timer.set["+i+"][0]";
   for(var j=1; (j+2)<args.length; j++){
   Timer.set[i][j] = args[j+2];
   t += ", Timer.set["+i+"]["+j+"]";
   }
   }
   t += ");";
   Timer.set[i].call = t;
   return t;
  }
  
  Timer.callOnce = function(i){
   if(!Timer.set[i]) return;
   eval(Timer.set[i].call);
   Timer.set[i] = null;
  }
  Timer.getNew = function(){
   var i = 0;
   while(Timer.set[i]) i++;
   return i;
  }
  
  准备工作做完,接下来开始代码主题了,其实还是挺简单的,递归调用而已,只不过是oo的方法实现,看起来比较那个,呵呵。注释是用英文写的,看懂应该问题不大。
  
  <script type="text/JavaScript">
   //***************************Class _geekees.Animator********************************
  
   //initialize
   if (typeof(_geekees.Animator) == "#ff0000")
   _geekees.Animator = {};
   else
   alert("Animator is already set!");
  
   //constructor
   _geekees.Animator = function( containerId
   , width
   , height
   , initialPosX
   , initialPosY
   , motionTime
   , stepX
   , stepY ){
  
   this.container = $( containerId );
   this.container.style.width = width + "px";
   this.container.style.height = height + "px";
   this.container.style.backgroundPosition = initialPosX + "px " + initialPosY + "px";
   this.startPosX = 0;
   this.startPosY = 0;
   this.endPosX = 0;
   this.endPosY = 0;
   this.isForwardX = true;
   this.isForwardY = true;
   this.motionTime = motionTime;
   this.timer = new Timer( this );//initial the Timer class
   this.stepX = stepX;//each time moving step
   this.stepY = stepY;
   }
  
   //move method
   _geekees.Animator.prototype.move = function(){
  
   if (this.isForwardX) {
   if (this.startPosX < this.endPosX) {
   this.timer.setTimeout('move', this.motionTime);
   this.startPosX += this.stepX;
   }
   }
   else {
   if (this.startPosX > this.endPosX) {
   this.timer.setTimeout('move', this.motionTime);
   this.startPosX -= this.stepX;
   }
   }
  
   if (this.isForwardY) {
   if (this.startPosY < this.endPosY) {
   this.timer.setTimeout('move', this.motionTime);
   this.startPosY += this.stepY;
   }
   }
   else {
   if (this.startPosY > this.endPosY) {
   this.timer.setTimeout('move', this.motionTime);
   this.startPosY -= this.stepY;
   }
   }
  
   //set the container status
   this.container.style.backgroundPosition = this.startPosX + "px " + this.startPosY + "px";
  
   }
  
   //the method which to be called
   _geekees.Animator.prototype.animate = function( startX, endX, startY, endY ){
   this.startPosX = startX;
   this.endPosX = endX;
   this.startPosY = startY;
   this.endPosY = endY;
  
   this.isForwardX = startX <= endX;//determine whether start position is larger than end position
   this.isForwardY = startY <= endY;
  
   this.move();
   }
   //***************************End of Class _geekees.Animator********************************
  
  
  
  
   /**//******************test*******************/
   function go(){
   ani.animate( 0, -208, 0, 0 );
   }
  
   function back(){
   ani.animate( -208, 0, 0, 0 );
   }
  
   var ani = new _geekees.Animator( 'divAni', 52, 37, 0, 0, 100 ,52, 0);
   </script>
  最后是那个container,也就是一个div:
  <div id="divAni" class="animator_containter" onmouseover="go();return false;" onmouseout="back();return false;">
  
  </div>
  完整代码下载
  http://www.cnblogs.com/Files/jinweijie/google_toolbar_ani.rar
  
  【updated】
  多个动画同时显示的调用
  http://www.cnblogs.com/Files/jinweijie/g_toolbar_multi.rar
    

关键词:动画 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (14)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 14 楼
* 匿名 发表于 2017/1/1 20:43:39
http://www.blue1000.com/bkhtml/c22/2006-03/44407.htm 入职转正申请书范文:http://www.135995.com/show/2696.html 休学申请书范文:http://www.135995.com/show/2797.html
第 13 楼
* 匿名 发表于 2016/12/24 17:03:35
http://www.blue1000.com/bkhtml/c22/2006-03/44407.htm 2016-2017学年度第一学期小学后勤工作计划 http://www.135995.com/show/13056.html 2016-2017学年第一学期小学学校工作计划 http://www.135995.com/show/13052.html
第 12 楼
* 匿名 发表于 2010/6/5 20:07:35
呵呵```
第 11 楼
* ji 发表于 2009/1/10 14:19:36
bhj
第 10 楼
* 无聊认识 发表于 2008/11/16 12:22:02
不会啊!~、、、