自定义一页滑块不起作用

Question

I am working on an one-page site. 我正在一页纸上工作。 The way you scroll/browse through the site is via a custom 'slider' that works by javascript. 您在网站上滚动/浏览的方式是通过可使用javascript的自定义“滑块”进行的。 The problem is however, that the page doesnt slide as it should. 但是问题是页面没有按原样滑动。

Sometimes when you load the page, it starts focussed in the middle of it. 有时，当您加载页面时，页面开始聚焦在页面中间。 Aside from that, sometimes when you slide, the page doesnt slide at all, and sometimes it doesnt slide back (and so forth). 除此之外，有时当您滑动时，页面根本不会滑动，有时也不会向后滑动（依此类推）。

Preview URL: http://edu.serialshop.nl/ivproject/achtergrond.htm 预览网址： 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>

Answer 1

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

change $body to $('body') or add the line var $body = $('body'); 将$body更改$body $('body')或添加行var $body = $('body'); to your $(document).ready(function(){}); 到您的$(document).ready(function(){}); block. 块。

自定义一页滑块不起作用

问题描述

1 个解决方案

解决方案1
1 2013-03-19 09:23:34

自定义一页滑块不起作用

问题描述

1 个解决方案

解决方案1 1 2013-03-19 09:23:34

解决方案1
1 2013-03-19 09:23:34