Archiv-Modus von Basti1012 Lösungspage

Ich habe hier mal ein Experiment unternommen für eine horizontale Website, in der ich Bilder präsentieren möchte. Ähnlich aufgebaut wie diese Website hier, die auch von einer Künstlerin ist: <span style="font-weight:900">** Link existiert nicht mehr **</span> Dort kann man zum "scrollen" sowohl das Rad von der Maus bedienen als auch mit der Tastatur (die Pfeile für rechts & links). Das finde ich gut so. Hier bei dieser Künstlerwebsite: <a href="http://christianeblattmann.de/12"> KünstlerwebsiteBeispiel nur mit der Tastatur scrollbar</a> kann man eben nur mit der Tastatur und dem nach rechts und linkszeigenden Pfeil eben scrollen. Deshalb finde ich die Lösung vom ersten Link <a href="http://christianeblattmann.de/12">schönes Beispiel einer Künstlerwebsite </a> ziemlich ansprechend. Nun habe ich mal ein horizontales mit dem Mausrad scrollbare Version nachgebaut: Hier zur Ansicht: <a href="http://misanthrop.bplaced.net/test/horizontale_website_demo2.html">eigenes Beispiel einer mit dem Mausrad scrollbaren Website</a> Dies funktioniert auch schon ganz gut. Aber ich komme nach einigen Experimenten nicht dahinter wie nun beides funktionieren kann. Sowohl das Mausradscrollen als auch mit der Tastatur (die rechts & links Pfeilen eben!) Was muss ich da ändern, das beides funktioniert. Wer hilft mir da weiter. Nochmal der Link zu meiner DEMOsite : <a href="http://misanthrop.bplaced.net/test/horizontale_website_demo2.html">eigenes Beispiel einer mit dem Mausrad scrollbaren Website</a> Gruß der einsiedelnde

Code

                                    
                                <!DOCTYPE html>
<html lang="de">
<head>
  <script src="/js_webseite/jquery.js"></script>
  <style>
body {
  margin: 0;
  padding: 0;
  overflow:auto;
  background:#111;
}
.horizontalScroll {
  display:flex;
  width:2500px;
  background: #2E2E2E;
  border: 1px dotted yellow;
}
.bg{
  width:1500px;
  height:1500px; 
  display:block;
  background: #FDFFFC;
  margin: 2.5vh; 
  background-image: url(/image/photo-1466496224275-4cbf790b285b.jpg);
  background-size:cover;
}
  </style>
   <meta charset="utf-8">
   <title>Bildvergrösserung</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="horizontalScroll">
  <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
</div>
  <script>
  /*
$('body').keydown(function(event){
    switch (event.keyCode) {
      case 39:
        move_left=-5;
        $('#horizontalScroll').css('left',wertx-move_left+'px');
        break;
      case 38:
        move_top=5
       $('#horizontalScroll').css('top',werty-move_top+'px');
        break;
      case 37:
        move_right=-5;
       $('#horizontalScroll').css('left',wertx+move_right+'px');
        break;        
      case 40:
        move_bottom=5;
       $('#horizontalScroll').css('top',werty+move_bottom+'px');
        break;
    }
});
*/
  </script>
</body>
</html>

basti1012.bplaced.net

Horizontale Website für eine Bildergalerie

Code