Hallo liebe Community.
Ich habe ein Problem mit einem Script, dass ich gefunden(nicht nur kopiert sondern verstanden) habe. Eigentlich sollte man mit einem Klick auf einen Link zum nächsten div horizontal scrollen können. Es geht aber leider nicht.
hier der Code:
index.html:
Style.css:
navigation.js:
Achso ich habe oben nicht die html-code funktion genommen, weil dies bei mir in einer einzigen zeile angezeigt wurde und das wollte ich niemandem antun.
Vielen Dank im vorraus
Euer Finneding
Ich habe ein Problem mit einem Script, dass ich gefunden(nicht nur kopiert sondern verstanden) habe. Eigentlich sollte man mit einem Klick auf einen Link zum nächsten div horizontal scrollen können. Es geht aber leider nicht.
hier der Code:
index.html:
Code:
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<script type = "text/javascript" src = "navigation.js"></script>
<div class="section black" id="section1">
<h2>Section 1</h2>
<p>
MY Spectre around me night and day
Like a wild beast guards my way;
My Emanation far within
Weeps incessantly for my sin.
</p>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section white" id="section2">
<h2>Section 2</h2>
<p>
A fathomless and boundless deep,
There we wander, there we weep;
On the hungry craving wind
My Spectre follows thee behind.
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section black" id="section3">
<h2>Section 3</h2>
<p>
He scents thy footsteps in the snow
Wheresoever thou dost go,
Thro' the wintry hail and rain.
When wilt thou return again?
</p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li>3</li>
</ul>
</div>
</body>
</html>Style.css:
Code:
*{
margin:0;
padding:0;
}
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
margin:50px 0px 30px 50px;
}
.section p{
margin:20px 0px 0px 50px;
width:600px;
}
.black{
color:#fff;
background:#000;
}
.white{
color:#000;
background:#fff;
}
.section ul{
list-style:none;
margin:20px 0px 0px 550px;
}
.black ul li{
float:left;
padding:5px;
margin:5px;
color:#aaa;
}
.black ul li a{
display:block;
color:#f0f0f0;
}
.black ul li a:hover{
text-decoration:none;
color:#fff;
}
.white ul li{
float:left;
padding:5px;
margin:5px;
color:#aaa;
}
.white ul li a{
display:block;
color:#222;
}
.white ul li a:hover{
text-decoration:none;
color:#000;
}navigation.js:
Code:
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});Vielen Dank im vorraus
Euer Finneding
Zuletzt bearbeitet:
