Hej learner,
Nej det er ikke særlig svært, du kan jo se deres kode i scroll.js. Jeg har kopieret deres javascript kode ind i en html-fil og lavet et lille eksempel til dig så du kan se hvordan det virker: :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"> <head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
var bbTimer = null;
var bbCounter = 0;
var bbOffset = 0;
var bbtop=20;
function updateBillboard() {
var bb=document.getElementById('billboard');
var window_top=window.bbtop ? bbtop : getY(bb);
if (document.body&&(typeof document.body.scrollTop!='undefined')) {
if (document.documentElement&&document.documentElement.scrollTop) {
window_top=Math.max(document.documentElement.scrollTop,window_top);
}
window_top=Math.max(document.body.scrollTop,window_top);
} else if(window.pageYOffset)
window_top=Math.max(window.pageYOffset,window_top);
if (bbCounter>1) {
if (bbCounter == 20)
bbOffset = parseInt(bb.style.top) ? parseInt(bb.style.top) : getY(bb);
bbCounter--;
window_top = bbOffset + Math.round((window_top-bbOffset)*(Math.cos(Math.PI/20*bbCounter)/2+0.5));
bbTimer = setTimeout(updateBillboard, 35);
}
bb.style.top=window_top+"px";
bbTimer = null;
}
function bbUpdate() {
if (bbTimer != null)
clearTimeout(bbTimer);
bbCounter = 20;
bbTimer = setTimeout(updateBillboard, 500);
}
function position_billboard() {
var bb=document.getElementById('billboard');
var scroll_top=0;
if (document.body&&(typeof document.body.scrollTop!='undefined')) {
if (document.documentElement&&document.documentElement.scrollTop)
scroll_top=document.documentElement.scrollTop;
else
scroll_top=document.body.scrollTop;
} else if(window.pageYOffset) {
scroll_top=window.pageYOffset;
}
var frame_top="3";
if (scroll_top<bbtop)
frame_top=bbtop-scroll_top;
bb.style.top=frame_top+'px';
}
function billboard() {
var bb;
if(!(bb=document.getElementById('billboard')))
return;
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
bb.style.position = 'absolute';
window.attachEvent("onscroll", bbUpdate);
window.onresize = updateBillboard;
updateBillboard();
} else {
position_billboard();
bb.style.position = 'fixed';
window.onresize = position_billboard;
window.onscroll = position_billboard;
}
}
function getX(obj) {
return (obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+getX(obj.offsetParent));
}
function getY(obj) {
return (obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+getY(obj.offsetParent));
}
</script>
</head>
<body onload="billboard();">
<table width="100%">
<tr>
<td align="center">
<table width="600" style="height: 1200px;">
<tr>
<td style="border: solid 1px black;">
Hej hej, Her er hovedsiden..
</td>
<td style="width: 100px" align="left">
<div id="billboard">
<table style="border: solid 1px gray; height: 200px; background-color: White;" width="100">
<tr>
<td>
Dette er banneret
</td>
</tr>
<tr>
<td>
<a href="
http://www.google.dk">Alt kan proppes herind</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Overodnet handler det bare om at sætte onscroll event'et og håndtere en flydende <div> tag med id="billboard".
Mvh.
- Snap :)
Ny bruger
Nybegynder
Opret
Preview
