Har lige leget lidt med det forrige script du fik og er kommet frem til en løsning der ser således ud:
horizontalScroller.js:
---------------------------------
function HScroller(objName, objContainer) {
this.obj = objContainer;
this.objParent = objContainer.parentNode;
this.objName = objName;
this.tmr = null;
this.interval = 50; // 50 ms
this.step = 1; // 1 pixel steps
this.direction = 1; // -1 scroller til venstre, 1 scroller til højre
this.stopAtEnd = true // stopper når scrolleren når enden af scrollområdet
if(this.direction > 0)
this.obj.style.left = -this.obj.offsetWidth + "px";
else if(this.direction < 0)
this.obj.style.left = this.objParent.offsetWidth + "px";
HScroller.prototype.scroll = function() {
if(this.obj.offsetLeft + (this.step * this.direction) + this.obj.offsetWidth >= this.objParent.offsetWidth) {
this.obj.style.left = this.objParent.offsetWidth - this.obj.offsetWidth + "px";
clearInterval(this.tmr);
return true;
}
else
this.obj.style.left = this.obj.offsetLeft + (this.step * this.direction) + "px";
if(this.direction > 0 && this.obj.offsetLeft > this.objParent.offsetWidth)
this.obj.style.left = -this.obj.offsetWidth + "px";
else if(this.direction < 0 && this.obj.offsetLeft < -this.obj.offsetWidth)
this.obj.style.left = this.objParent.offsetWidth + "px";
}
HScroller.prototype.decreaseInterval = function() {
this.stop();
if(arguments.length > 0)
this.interval -= (this.interval - parseInt(arguments[0]) > 0 ? parseInt(arguments[0]) : 0);
else
this.interval -= (this.interval - 1 > 0 ? 1 : 0);
this.start();
}
HScroller.prototype.increaseInterval = function() {
this.stop();
if(arguments.length > 0)
this.interval += parseInt(arguments[0]);
else
this.interval += 1;
this.start();
}
HScroller.prototype.start = function() {
if(!this.tmr)
this.tmr = window.setInterval(this.objName + ".scroll()", this.interval);
}
HScroller.prototype.stop = function() {
if(this.tmr)
clearInterval(this.tmr);
this.tmr = null;
}
}
Og det er testet og brugen illustreret via flg. asp-side
testside.asp:
---------------------
<%@ language="vbscript" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>rockrod</title>
<script type="text/javascript" src="scroller2.js"></script>
<script type="text/javascript" src="horizontalScroller.js"></script>
<script type="text/javascript">
var objLeftScroll;
var objRightScroll;
var objIntroScroll;
window.onload = function() {
objRightScroll = new Scroller("objRightScroll", document.getElementById("rightscroll"));
objLeftScroll = new Scroller("objLeftScroll", document.getElementById("leftscroll"));
objIntroScroll = new HScroller("objIntroScroll", document.getElementById("introscroll"));
objIntroScroll.step = 10;
objIntroScroll.interval = 10;
objLeftScroll.start();
objRightScroll.start();
objIntroScroll.start();
}
</script>
<style type="text/css">
body {
background-color: #800000;
font: normal 83% verdana, arial, sans-serif;
color: white;
margin: 10px 10px 10px 10px;
}
.topbox {
display:block;
float:left;
width:770px;
height:75px;
border:solid 1px white;
}
.topbox .lefttext, .topbox .righttext {
overflow:hidden;
width:75px;
height:75px;
margin:0 5px;
font: normal 83% verdana, arial, sans-serif;
}
.topbox .lefttext {
position:relative;
float:left;
}
.topbox .righttext {
position:relative;
float:right;
text-align:right;
}
.topbox .hscroller {
overflow:hidden;
position:relative;
float:left;
margin:0 5px;
width:770px;
height:40px;
background-color:#dfdfdf;
color:red;
}
.topbox .centertext {
margin:0 auto;
padding:0;
width:400px;
text-align:center;
}
.topbox h1 {
margin:0;
font: bold 170% verdana, arial, sans-serif;
color: #FFF8DC;
}
.topbox p {
width:100%;
margin:0;
font: normal 83% verdana, arial, sans-serif;
}
#leftscroll, #rightscroll, #introscroll {
position:absolute;
top:0;
left:0;
}
#introscroll {
font-size:28px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="topbox">
<div class="lefttext">
<div id="leftscroll">
Livemusik1<br><br><br><br>
Livemusik1<br><br><br><br>
Livemusik1<br><br><br><br>
Livemusik1<br><br><br><br>
Livemusik1
</div>
</div>
<div class="righttext">
<div id="rightscroll">
Livemusik2<br><br><br><br>
Livemusik2<br><br><br><br>
Livemusik2<br><br><br><br>
Livemusik2<br><br><br><br>
Livemusik2
</div>
</div>
<div class="centertext">
<h1>Velkommen til Rockrødderne</h1>
<p>Vi underholder med populære hits fra 60´erne og 70´erne<br> indenfor pop- og rockgenren</p>
</div>
<div class="hscroller">
<div id="introscroll" nowrap="true">
Dette er en test!
</div>
</div>
</div>
</body>
</html>
ud over det gør siden også brug af det script du allerede har fået der hedder scroller2.js...
Ny bruger
Nybegynder
Opret
Preview
