0

私はワンページサイトに取り組んでいます。サイトをスクロール/ブラウジングする方法は、javascript で動作するカスタム 'スライダー' を使用します。ただし、問題は、ページがスライドしないことです。

ページをロードすると、ページの途中からフォーカスが開始されることがあります。それとは別に、スライドしてもページがまったくスライドしない場合もあれば、スライドしない場合もあります (など)。

プレビュー URL: http://edu.serialshop.nl/ivproject/achtergrond.htm

<!doctype html>
<html>
<head>
<title>Skullcandy mediacollege</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<style>
body{
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    background-color: #3D3B3C;
}

.absolute{
    position: fixed;
    left: 20px;
    bottom: 75px;
    height: 233px;
    width: 255px;
}

body {
    overflow-x: hidden;
}
</style>
<script>
var pageSize = 1;
$(function(){
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td></td>"); 
    pageSize=$body.width();
    console.log($body.width());
});

function customScroll(amount)
{
    console.log("scrolleft: " + document.body.scrollLeft + " amount: " + amount);
    document.body.scrollLeft+=amount/10;
}
</script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
<script>
$(document).ready(function(){
    $(window).bind('resize',function() {
        window.location.href = window.location.href;
    });
});
</script>
</head>
<body onload="javascript:window.location.href='#bottom'">
    <div id="map">
        <img src="images/achtergrond.jpg" width="3568" height="800" id="achtergrond" usemap="#m_achtergrond" alt="" />
        <img class="absolute" src="images/skelet.png" alt="skullcandy logo op een skateboard">
        <map name="m_achtergrond" id="m_achtergrond">
            <area shape="rect" coords="3142,0,3418,636" href="#" alt="Review" />
            <area shape="rect" coords="1957,0,2230,635" href="#" alt="Muziek" />
            <area shape="rect" coords="769,0,1039,636" href="#" alt="About us" />
            <area shape="rect" coords="-2,4,295,640" href="#" alt="Over skullcandy" />
        </map>
    </div>
    <div id="slider" style="position:fixed; margin-left:30%; margin-top:-10%;"></div>
    <script>
      var stage = new Kinetic.Stage({
        container: 'slider',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rectHeight = 50;
      var rectWidth = 200;
      var rectY = (stage.getHeight() - rectHeight) / 2;

      var hbox = new Kinetic.Text({
        x: -10,
        y: 70,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'slider',
        fill: 'white',
        padding: 15,
        draggable: true,
        dragBoundFunc: function(pos) {
            customScroll(pos.x);
          return {
            x: pos.x,
            y: this.getAbsolutePosition().y
          }
        }
      });

      layer.add(hbox);
      stage.add(layer);

    </script>
    <span id="bottom">
    </span>
</body>
</html>
4

1 に答える 1

1 
Uncaught ReferenceError: $body is not defined : /ivproject/achtergrond.htm:32

ブロックに変更$bodyする$('body')か、行を追加var $body = $('body');します$(document).ready(function(){});。

于 2013-03-19T09:23:34.653 に答える