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.
133 lines
3.3 KiB
133 lines
3.3 KiB
<!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>
|
|
|