michaelsinterface.de

move.layer | horizontal

Die CSS-Eigenschaft left definiert die linke Startposition für ein HTML-Element.

Mit dem hier vorgestellten Script wird der Wert für die linke Position manipuliert, und das Element im Anzeigefenster an eine festgelegte Position horizontal bewegt.

JavaScript

Der Script-Code wird im Dokument-Header notiert:

function init(){
        if(document.getElementById){
        obj = document.getElementById("boxDiv");
        obj.style.left = "-130px";
        }
}

function slideRight(){
        if(obj){
                if(parseInt(obj.style.left) < 0){
                        obj.style.left = parseInt(obj.style.left) + 10 + "px";
                        setTimeout("slideRight()",50);
                }
        }
}

function slideLeft(){
        if(obj){
                if(parseInt(obj.style.left) > -130){
                        obj.style.left = parseInt(obj.style.left) - 10 + "px";
                        setTimeout("slideLeft()",50);
                }
        }
}

window.onload = function(){
        init();
        slideRight();
}

CSS

Für das Element wird im ID-Selektor #boxDiv mit der left-Eigenschaft die gewünschte Startposition festgelegt - in diesem Beispiel liegt die Box durch den negativen left-Wert im nicht-sichtbaren Bereich des Fensters:

#boxDiv {
position: absolute;
left: -130px;
top: 0px;
z-index: 1000;
width: 140px;
height: 180px;
background: #eaeaea;
}

Funktionsaufruf

Der Funktionsaufruf lässt sich über den onclick- oder onmouseover / onmouseout-Eventhandler implementieren:

<a href="#" onclick="slideRight()">slideRight</a> | <a href="#" onclick="slideLeft()">slideLeft</a>

<a href="#" onmouseover="slideRight()" onmouseout="slideLeft()">slideRight/Left</a>

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: move.layer :::</title>

<script type="text/javascript">
<!--
function init(){
        if(document.getElementById){
        obj = document.getElementById("boxDiv");
        obj.style.left = "-130px";
        }
}
function slideRight(){
        if(obj){
                if(parseInt(obj.style.left) < 0){
                        obj.style.left = parseInt(obj.style.left) + 10 + "px";
                        setTimeout("slideRight()",50);
                }
        }
}
function slideLeft(){
        if(obj){
                if(parseInt(obj.style.left) > -130){
                        obj.style.left = parseInt(obj.style.left) - 10 + "px";
                        setTimeout("slideLeft()",50);
                }
        }
}
window.onload = function(){
        init();
        slideRight();
}
//-->
</script>

<style type="text/css">
#boxDiv {
position: absolute;
left: -130px;
top: 0px;
z-index: 1000;
width: 140px;
height: 180px;
background: #eaeaea;
opacity: 0.80;
filter: alpha(opacity=80);
}
p {
text-align: right;
}
</style>

</head>
<body>

<p>onclick:
    <a href="#" onclick="slideRight()">slideRight</a> | <a href="#" onclick="slideLeft()">slideLeft</a>
</p>
<p>onmouseover:
    <a href="#" onmouseover="slideRight()" onmouseout="slideLeft()">slideRight/Left</a>
</p>
<div id="boxDiv">Box</div>

</body>
</html>