Joe Abou Jaoude said:
I was asked to do the folowing visual effect, and I was wondering if
someone knows how to.
To view the visual effect , go to this link:
http://v4.windowsupdate.microsoft.com/en/default.asp (windows update)
It is worth mentioning that this page requires IE.
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.
Why?
any thoughts ?
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,20,100)
} else {
moveElemTo(mover,around.offsetLeft,around.offsetTop,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>
