You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.3 KiB
134 lines
3.3 KiB
2 years ago
|
<!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" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<title>HTML Effects</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<style type="text/css">
|
||
|
|
#fadeElm {
|
||
|
|
padding : 10px;
|
||
|
|
width : 70%;
|
||
|
|
background : #666;
|
||
|
|
color : #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
#slider {
|
||
|
|
position : absolute;
|
||
|
|
padding : 5px;
|
||
|
|
background : #ccc;
|
||
|
|
left : 400px;
|
||
|
|
top : 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#flash {
|
||
|
|
}
|
||
|
|
|
||
|
|
#wiper {
|
||
|
|
position : absolute;
|
||
|
|
left : 100px;
|
||
|
|
top : 250px;
|
||
|
|
width : 200px;
|
||
|
|
background : #ccc;
|
||
|
|
-moz-opacity: 0.9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wiper2 {
|
||
|
|
position : absolute;
|
||
|
|
left : 350px;
|
||
|
|
top : 200px;
|
||
|
|
width : 200px;
|
||
|
|
background : #ccc;
|
||
|
|
-moz-opacity: 0.9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
#explode {
|
||
|
|
position : absolute;
|
||
|
|
left : 200px;
|
||
|
|
top : 100px;
|
||
|
|
background : #ddd;
|
||
|
|
width : 400px;
|
||
|
|
height : 300px;
|
||
|
|
text-align : center;
|
||
|
|
display : none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script language="JavaScript" type="text/javascript">
|
||
|
|
// Dojo configuration
|
||
|
|
djConfig = {
|
||
|
|
isDebug: true
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dojo.lfx.*");
|
||
|
|
|
||
|
|
var fadeElem, flash, unflash, wiper;
|
||
|
|
dojo.addOnLoad(function() {
|
||
|
|
dojo.lfx.html.highlight("flash", [230, 230, 180], 500).play(1500);
|
||
|
|
|
||
|
|
dojo.lfx.html.unhighlight("unflash", [255, 200, 180], 500).play(1500);
|
||
|
|
|
||
|
|
dojo.lfx.html.wipeIn("wiper", 750).play();
|
||
|
|
});
|
||
|
|
|
||
|
|
function testExplode(start){
|
||
|
|
dojo.lfx.explode(start, "explode", 250).play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function testImplode(start){
|
||
|
|
dojo.lfx.implode("explode", start, 250).play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function wowi(node) {
|
||
|
|
var wipeOut = dojo.lfx.wipeOut(node, null, null, function(n) {
|
||
|
|
n.innerHTML = "I have been replaced "
|
||
|
|
+ "with something completely different "
|
||
|
|
+ "in the middle of the wipe effects.";
|
||
|
|
dojo.lfx.wipeIn(n).play();
|
||
|
|
});
|
||
|
|
wipeOut.play();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<a href="javascript:void(dojo.lfx.html.fadeOut('fadeElm', 300).play())">Fade out</a>
|
||
|
|
|
|
||
|
|
<a href="javascript:void(dojo.lfx.html.fadeIn('fadeElm', 300).play())">Fade in</a>
|
||
|
|
|
|
||
|
|
<a href="javascript:void(dojo.html.setOpacity(dojo.byId('fadeElm'), 0.5))">Set opacity = 50%</a>
|
||
|
|
|
||
|
|
<div id="fadeElm">Element to fade</div>
|
||
|
|
|
||
|
|
<a href="javascript:void(dojo.lfx.html.slideTo('slider', { top: 200, left: 200 }, 300).play())">Slide to: 200, 200</a>
|
||
|
|
|
|
||
|
|
<a href="javascript:void(dojo.lfx.html.slideBy('slider', { top: 50, left: 50 } , 300).play())">Slide by: 50, 50</a>
|
||
|
|
|
|
||
|
|
<a href="javascript:void(dojo.lfx.html.slideTo('slider', { top: 300, left: 400 }, 300).play())">Reset</a>
|
||
|
|
<div id="slider">I slide</div>
|
||
|
|
|
||
|
|
<div id="flash">I fade to my BG!</div>
|
||
|
|
<div id="unflash">I fade from my BG!</div>
|
||
|
|
|
||
|
|
<div id="wiper">
|
||
|
|
<a href="javascript:void(dojo.lfx.html.wipeOut('wiper', 400).play())">Wipe out</a> wipe wipe. It is so fun to...
|
||
|
|
Wipe wipe wipe. It is so fun to...
|
||
|
|
Wipe wipe wipe. It is so fun to...
|
||
|
|
Wipe wipe wipe. It is so fun to...
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="wiper2">
|
||
|
|
This one does a wipeOut+wipeIn that you could use
|
||
|
|
to replace the content. Go ahead, give it a
|
||
|
|
<a href="javascript:;" onclick="wowi(this.parentNode)">try</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>Non-wipe...</div>
|
||
|
|
|
||
|
|
<div id="explode">EXPLODE!!!</div>
|
||
|
|
<a href="javascript:;" onclick="testExplode(this)">Explode!</a>
|
||
|
|
<a href="javascript:;" onclick="testImplode(this)">Implode!</a>
|
||
|
|
</body>
|
||
|
|
</html>
|