Joe Abou Jaoude <joe30@hotmail.com> writes:
[color=blue]
> I was asked to do the folowing visual effect, and I was wondering if
> someone knows how to.[/color]
[color=blue]
> To view the visual effect , go to this link:
>
http://v4.windowsupdate.microsoft.com/en/default.asp (windows update)[/color]
It is worth mentioning that this page requires IE.
[color=blue]
> In the left pan, click on pick updates to install
> then choose windows 2000(11).
> in the page displayed, click on the add or remove buttons,and the text
> goes to the left-right.
> I want to produce this in my application.[/color]
Why?
[color=blue]
> any thoughts ?[/color]
Make a div matching the text to move, move it and shrink it at the same time.
Try this:
---
<!DOCTYPE html PUBLIC "...">
<html>
<head><title>Test</title>
<style type="text/css">
#mover {
position:absolute;
border:1px solid black;
overflow:hidden;
visibility:hidden;
}
</style>
</head>
<body>
<div id="around">
<div id="mover">Denne tekst skal flyttes.<br>Om lidt.</div>
Denne tekst skal flyttes.<br>Om lidt</div>
<script type="text/javascript">
function moveElemTo(elem,x,y,sizex,sizey,steps,freq) {
var cur_x = elem.offsetLeft;
var cur_y = elem.offsetTop;
var cur_sizex = elem.offsetWidth;
var cur_sizey = elem.offsetHeight;
var ctr = 0;
var es = elem.style;
es.visibility="visible";
var stepFunc = function stepFunc() {
ctr++;
var per = ctr/steps;
var nper = 1-per;
es.left = Math.round(cur_x * nper + x * per)+"px";
es.top = Math.round(cur_y * nper + y * per)+"px";
es.width = Math.round(cur_sizex * nper + sizex * per)+"px";
es.height = Math.round(cur_sizey * nper + sizey * per)+"px";
if (ctr < steps) {setTimeout(stepFunc,freq);}
else {es.visibility="hidden";}
}
stepFunc();
}
</script>
<script type="text/javascript">
var down = true;
var around = document.getElementById("around");
var mover = document.getElementById("mover")
function clickHandler(event) {
event = event || window.event; // IE sucks
if (down) {
moveElemTo(mover,event.clientX,event.clientY,0,0,2 0,100)
} else {
moveElemTo(mover,around.offsetLeft,around.offsetTo p,around.offsetWidth,
around.offsetHeight,20,100);
}
down=!down;
}
var root = document.documentElement||document.body;
if (root.addEventListener) {
root.addEventListener("click",clickHandler,false);
} else {
root.onclick=clickHandler;
}
</script>
</body>
</html>
---
/L
--
Lasse Reichstein Nielsen -
lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
