JavaScript DHTML/Rico/Animate

Материал из Web эксперт
Перейти к: навигация, поиск

Animate position

 

<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","Effect");
var EffectDemo,div1,div2;
Rico.onLoad( function() {
  EffectDemo = Class.create();
  EffectDemo.prototype = {
    initialize: function(element) {
      this.animator = new Rico.Effect.Animator();
      this.element = $(element);
      this.startLeft = this.element.offsetLeft;
      this.startSize = this.element.offsetWidth;
    },
    sizeEffectStarted: false,
    positionEffectStarted: false,
    fadeEffectStarted: false,
    play: function(effect) {
      this.animator.play(effect, {steps:20, duration:700});
    },
    togglePosition: function(){
      this.play(new Rico.Effect.Position(this.element, this.nextPosition(), null));
    },
    toggleSize: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, null, null, this.nextSize(), null));
    },
    toggleSizeAndPosition: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, this.nextPosition(), null, this.nextSize(), null ));
    },
    togglePositionAndFade: function(){
      this.play(new Rico.Effect.SizeAndPositionFade(this.element, this.nextPosition(), null, null, null, this.nextFadeState() ));
    },
    toggleFade: function(){
      this.play(new Rico.Effect.FadeTo(this.element, this.nextFadeState()));
    },
    nextPosition: function(){
      this.positionEffectStarted = !this.positionEffectStarted;
      return !this.positionEffectStarted ? this.startLeft : 520;
    },
    nextSize: function(){
      this.sizeEffectStarted = !this.sizeEffectStarted;
      return !this.sizeEffectStarted ? this.startSize : 350;
    },
    nextFadeState: function(){
      this.fadeEffectStarted = !this.fadeEffectStarted;
      return !this.fadeEffectStarted ? 1 : 0;
    }
  };
  Rico.Corner.round("effect_object_r", { useMoz: false });  // don"t use native corner rounding in Gecko because animation leaves artifacts
  div1=new EffectDemo("effect_object");
  div2=new EffectDemo("effect_object_r");
});
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size   : 11px;
}
h1 {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 16pt;
}
div.sizeMe {
   width            : 120px;
   background-color : #c6c3de;
   padding-top      : 10px;
   padding-bottom   : 10px;
   font-family      : Arial;
   font-size        : 11px;
   text-align       : center;
   position         : absolute;
}
</style>

</head>

<body>
<h1 style="float:left;">Rico Animation &amp; Effects</h1>
<p style="clear:both;">
<table border="0">
<tr>
<td>
<td><button onclick="div1.toggleSize(); div2.toggleSize();">Animate Size</button>
<td><button onclick="div1.toggleFade(); div2.toggleFade();">Fade Out/Fade In</button>
<tr>
<td><button onclick="div1.togglePosition(); div2.togglePosition();">Animate Position</button>
<td><button onclick="div1.toggleSizeAndPosition(); div2.toggleSizeAndPosition();">Animate Position & Size</button>
<td><button onclick="div1.togglePositionAndFade(); div2.togglePositionAndFade();">Animate Position & Fade</button>
</table>

<p>&nbsp;
<div id="effect_object" class="sizeMe" style="border: 6px solid black;">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
<p style="height:100px;">&nbsp;
<div id="effect_object_r" class="sizeMe">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
</body>
</html>



Animate position and size

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","Effect");
var EffectDemo,div1,div2;
Rico.onLoad( function() {
  EffectDemo = Class.create();
  EffectDemo.prototype = {
    initialize: function(element) {
      this.animator = new Rico.Effect.Animator();
      this.element = $(element);
      this.startLeft = this.element.offsetLeft;
      this.startSize = this.element.offsetWidth;
    },
    sizeEffectStarted: false,
    positionEffectStarted: false,
    fadeEffectStarted: false,
    play: function(effect) {
      this.animator.play(effect, {steps:20, duration:700});
    },
    togglePosition: function(){
      this.play(new Rico.Effect.Position(this.element, this.nextPosition(), null));
    },
    toggleSize: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, null, null, this.nextSize(), null));
    },
    toggleSizeAndPosition: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, this.nextPosition(), null, this.nextSize(), null ));
    },
    togglePositionAndFade: function(){
      this.play(new Rico.Effect.SizeAndPositionFade(this.element, this.nextPosition(), null, null, null, this.nextFadeState() ));
    },
    toggleFade: function(){
      this.play(new Rico.Effect.FadeTo(this.element, this.nextFadeState()));
    },
    nextPosition: function(){
      this.positionEffectStarted = !this.positionEffectStarted;
      return !this.positionEffectStarted ? this.startLeft : 520;
    },
    nextSize: function(){
      this.sizeEffectStarted = !this.sizeEffectStarted;
      return !this.sizeEffectStarted ? this.startSize : 350;
    },
    nextFadeState: function(){
      this.fadeEffectStarted = !this.fadeEffectStarted;
      return !this.fadeEffectStarted ? 1 : 0;
    }
  };
  Rico.Corner.round("effect_object_r", { useMoz: false });  // don"t use native corner rounding in Gecko because animation leaves artifacts
  div1=new EffectDemo("effect_object");
  div2=new EffectDemo("effect_object_r");
});
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size   : 11px;
}
h1 {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 16pt;
}
div.sizeMe {
   width            : 120px;
   background-color : #c6c3de;
   padding-top      : 10px;
   padding-bottom   : 10px;
   font-family      : Arial;
   font-size        : 11px;
   text-align       : center;
   position         : absolute;
}
</style>

</head>

<body>
<h1 style="float:left;">Rico Animation &amp; Effects</h1>
<p style="clear:both;">
<table border="0">
<tr>
<td>
<td><button onclick="div1.toggleSize(); div2.toggleSize();">Animate Size</button>
<td><button onclick="div1.toggleFade(); div2.toggleFade();">Fade Out/Fade In</button>
<tr>
<td><button onclick="div1.togglePosition(); div2.togglePosition();">Animate Position</button>
<td><button onclick="div1.toggleSizeAndPosition(); div2.toggleSizeAndPosition();">Animate Position & Size</button>
<td><button onclick="div1.togglePositionAndFade(); div2.togglePositionAndFade();">Animate Position & Fade</button>
</table>

<p>&nbsp;
<div id="effect_object" class="sizeMe" style="border: 6px solid black;">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
<p style="height:100px;">&nbsp;
<div id="effect_object_r" class="sizeMe">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
</body>
</html>



Animate size

 
<!--
Apache License, Version 2.0
Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","Effect");
var EffectDemo,div1,div2;
Rico.onLoad( function() {
  EffectDemo = Class.create();
  EffectDemo.prototype = {
    initialize: function(element) {
      this.animator = new Rico.Effect.Animator();
      this.element = $(element);
      this.startLeft = this.element.offsetLeft;
      this.startSize = this.element.offsetWidth;
    },
    sizeEffectStarted: false,
    positionEffectStarted: false,
    fadeEffectStarted: false,
    play: function(effect) {
      this.animator.play(effect, {steps:20, duration:700});
    },
    togglePosition: function(){
      this.play(new Rico.Effect.Position(this.element, this.nextPosition(), null));
    },
    toggleSize: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, null, null, this.nextSize(), null));
    },
    toggleSizeAndPosition: function(){
      this.play(new Rico.Effect.SizeAndPosition(this.element, this.nextPosition(), null, this.nextSize(), null ));
    },
    togglePositionAndFade: function(){
      this.play(new Rico.Effect.SizeAndPositionFade(this.element, this.nextPosition(), null, null, null, this.nextFadeState() ));
    },
    toggleFade: function(){
      this.play(new Rico.Effect.FadeTo(this.element, this.nextFadeState()));
    },
    nextPosition: function(){
      this.positionEffectStarted = !this.positionEffectStarted;
      return !this.positionEffectStarted ? this.startLeft : 520;
    },
    nextSize: function(){
      this.sizeEffectStarted = !this.sizeEffectStarted;
      return !this.sizeEffectStarted ? this.startSize : 350;
    },
    nextFadeState: function(){
      this.fadeEffectStarted = !this.fadeEffectStarted;
      return !this.fadeEffectStarted ? 1 : 0;
    }
  };
  Rico.Corner.round("effect_object_r", { useMoz: false });  // don"t use native corner rounding in Gecko because animation leaves artifacts
  div1=new EffectDemo("effect_object");
  div2=new EffectDemo("effect_object_r");
});
</script>
<style type="text/css">
body, p {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size   : 11px;
}
h1 {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 16pt;
}
div.sizeMe {
   width            : 120px;
   background-color : #c6c3de;
   padding-top      : 10px;
   padding-bottom   : 10px;
   font-family      : Arial;
   font-size        : 11px;
   text-align       : center;
   position         : absolute;
}
</style>

</head>

<body>
<h1 style="float:left;">Rico Animation &amp; Effects</h1>
<p style="clear:both;">
<table border="0">
<tr>
<td>
<td><button onclick="div1.toggleSize(); div2.toggleSize();">Animate Size</button>
<td><button onclick="div1.toggleFade(); div2.toggleFade();">Fade Out/Fade In</button>
<tr>
<td><button onclick="div1.togglePosition(); div2.togglePosition();">Animate Position</button>
<td><button onclick="div1.toggleSizeAndPosition(); div2.toggleSizeAndPosition();">Animate Position & Size</button>
<td><button onclick="div1.togglePositionAndFade(); div2.togglePositionAndFade();">Animate Position & Fade</button>
</table>

<p>&nbsp;
<div id="effect_object" class="sizeMe" style="border: 6px solid black;">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
<p style="height:100px;">&nbsp;
<div id="effect_object_r" class="sizeMe">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Rico/Animate&oldid=3605»