JavaScript DHTML/Ext JS/Animation
Содержание
- 1 Animated window display
- 2 Animation: Move Div tag to a new position
- 3 Block and inline frame animation
- 4 Fadein block and inline tags
- 5 Fade out block and inline tags
- 6 Fly away ghost
- 7 Hide panel with slidein
- 8 Highlight block and inline tags
- 9 Puff inline and block tags
- 10 Scale animation
- 11 Shift a tag
- 12 Slide in animation
- 13 Slide out animation
- 14 Switchoff Animation
Animated window display
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">
Ext.onReady(function(){
var w = new Ext.Window({
height: 500,
width: 500
});
w.show("animTarget", function() { alert("alert"); }, this);
}); </script> <body>
</body> </html>
</source>
Animation: Move Div tag to a new position
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <style type="text/css"> div {
border : 1px solid #AAAAAA; width : 200; cursor : pointer; padding : 2px 2px 2px 2px; margin : 2px 2px 2px 2px;
} </style> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myDiv1 = Ext.get("div1");
var newX = 50;
var newY = 10;
myDiv1.moveTo(newX, newY, {
callback : function() {
var msgX = Math.ceil(this.getX());
var msgY= Math.ceil(this.getY());
var msg = "X = " + msgX + " Y = " + msgY;
this.update(msg);
}
});
}); </script>
</body> </html>
</source>
Block and inline frame animation
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").frame("ff0000", 3);
Ext.get("inline").frame("ff0000", 3);
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Fadein block and inline tags
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").fadeOut();
Ext.get("inline").fadeOut();
Ext.get("block").fadeIn();
Ext.get("inline").fadeIn();
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Fade out block and inline tags
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").fadeOut();
Ext.get("inline").fadeOut();
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Fly away ghost
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").ghost();
Ext.get("inline").ghost("tr");
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Hide panel with slidein
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { var myButton = new Ext.Button({
text : "hide me",
handler : function() {
myPanel.el.switchOff({
callback : function() {
myPanel.el.slideIn.defer(500, myPanel.el, []);
}
});
}
}); myPanel = new Ext.Panel({
width : 200, height : 100, title : "Title me", frame : true, renderTo : Ext.getBody(), items : myButton
}); }); </script>
</body> </html>
</source>
Highlight block and inline tags
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").highlight();
Ext.get("inline").highlight();
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Puff inline and block tags
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").puff();
Ext.get("inline").puff();
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Scale animation
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").scale(50, 50);
Ext.get("inline").scale(300, 20);
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Shift a tag
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").shift({x: 5, y: 300, width: 300, height: 200});
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Slide in animation
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").slideIn();
Ext.get("inline").slideIn("tl");
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Slide out animation
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").slideOut();
Ext.get("inline").slideOut("tl");
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
Switchoff Animation
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
Ext.get("block").switchOff();
Ext.get("inline").switchOff();
}); </script> <body>
I Am A Block Element
I Am An Inline Element
</body> </html>
</source>
