mirror of
https://github.com/boostorg/test.git
synced 2026-01-26 07:02:12 +00:00
84 lines
2.3 KiB
HTML
84 lines
2.3 KiB
HTML
<html>
|
|
<head>
|
|
<script language="javascript">var viso_path=".."</script>
|
|
<script language="javascript" src="../core.js" > </script>
|
|
<script language="javascript">
|
|
JS.include( "transitions.js", viso_path );
|
|
|
|
var from_obj, to_obj;
|
|
|
|
function apply_transition() {
|
|
var selector = viso_get("id_selector");
|
|
var transition_id = selector.options[selector.selectedIndex].value;
|
|
|
|
viso_make_transition( from_obj, to_obj, transition_id, 10, new Callback( switch_objs ),
|
|
viso_get("x_step_size").value,
|
|
viso_get("y_step_size").value );
|
|
}
|
|
|
|
function init() {
|
|
from_obj = viso_get( 'div1' );
|
|
to_obj = viso_get( 'div2' );
|
|
|
|
viso_set_height( viso_get("holder"), viso_get_height( from_obj ) );
|
|
viso_set_width( viso_get("holder"), viso_get_width( from_obj ) );
|
|
}
|
|
|
|
function switch_objs() {
|
|
var tmp = to_obj;
|
|
to_obj = from_obj;
|
|
from_obj = tmp;
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onLoad="init();" style="padding:2em">
|
|
<div>
|
|
<table width="100%">
|
|
<tr>
|
|
<td>
|
|
<div id="holder" >
|
|
<span id="div1" style="position:absolute; background: white">
|
|
<nobr><font size=5>Original text</font></nobr>
|
|
</span>
|
|
<span id="div2" style="display:none; position:absolute; background: white">
|
|
<nobr><font size=7>Another longer text</font></nobr>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td width="40%">
|
|
Side text
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
Some other text
|
|
</div>
|
|
<div style="position: absolute; bottom: 0px; width: 100%; height: 100px;">
|
|
X step size: <input type="text" value="10" id="x_step_size">
|
|
Y step size: <input type="text" value="10" id="y_step_size">
|
|
Transition:
|
|
<select Name="id_selector" onchange="apply_transition();">
|
|
<option Value="wipe-right"> wipe-right
|
|
<option Value="wipe-left"> wipe-left
|
|
<option Value="wipe-up"> wipe-up
|
|
<option Value="wipe-down"> wipe-down
|
|
<option Value="box-in"> box-in
|
|
<option Value="box-out"> box-out
|
|
<option Value="box-in-out"> box-in-out
|
|
<option Value="split-in-vert"> split-in-vert
|
|
<option Value="split-out-vert"> split-out-vert
|
|
<option Value="split-in-out-vert"> split-in-out-vert
|
|
<option Value="split-in-hor"> split-in-hor
|
|
<option Value="split-out-hor"> split-out-hor
|
|
<option Value="split-in-out-hor"> split-in-out-hor
|
|
</select>
|
|
<br>
|
|
<input type="button" value="Apply" onClick="apply_transition();">
|
|
<br><br>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|