Javascript 自定义单页滑块不工作
我在一个单页网站上工作。您滚动/浏览站点的方式是通过javascript工作的自定义“滑块”。但问题是，页面没有按应有的方式滑动 有时候，当你加载页面时，它就开始集中在中间。除此之外，有时当你滑动页面时，页面根本不会滑动，有时也不会向后滑动（等等） 预览URL:Javascript 自定义单页滑块不工作,javascript,jquery,html,slider,Javascript,Jquery,Html,Slider,我在一个单页网站上工作。您滚动/浏览站点的方式是通过javascript工作的自定义“滑块”。但问题是，页面没有按应有的方式滑动 有时候，当你加载页面时，它就开始集中在中间。除此之外，有时当你滑动页面时，页面根本不会滑动，有时也不会向后滑动（等等） 预览URL: 斯库尔坎迪传媒学院 身体{ 填充：0； 保证金：0； 溢出y：隐藏； 背景色：#3D3B3C； } .绝对的{ 位置：固定； 左：20px； 底部：75px； 高度：233px； 宽度：255px； } 身体{ 溢出x：隐藏； } v
斯库尔坎迪传媒学院
身体{
填充：0；
保证金：0；
溢出y：隐藏；
背景色：#3D3B3C；
}
.绝对的{
位置：固定；
左：20px；
底部：75px；
高度：233px；
宽度：255px；
}
身体{
溢出x：隐藏；
}
var pageSize=1；
$（函数（）{
$（“#换页”）.wrapInner（“”）；
$（“.post”）.wrap（“”）；
pageSize=$body.width（）；
log（$body.width（））；
});
功能自定义滚动（金额）
{
console.log（“scrolleft:+document.body.scrolleft+”金额：+amount）；
单据.body.scrollLeft+=金额/10；
}
$（文档）.ready（函数（）{
$（窗口）.bind（'resize'，function（）{
window.location.href=window.location.href；
});
});
var阶段=新的动力学阶段({
容器：“滑块”，
宽度：578，
身高：200
});
var layer=新的动能层（）；
高度=50；
宽度=200；
变量rectY=（stage.getHeight（）-recthheight）/2；
var hbox=新的动能文本({
x:-10，
y:70，
尺寸：24，
fontFamily：“Calibri”，
文本：“滑块”，
填充：“白色”，
填充：15，
真的，
dragBoundFunc:函数（位置）{
定制卷轴（pos.x）；
返回{
x:pos.x，
y:this.getAbsolutePosition（）.y
}
}
});
添加层（hbox）；
阶段。添加（层）；
将
$body$（'body'）var$body=$（'body'）$（文档）.ready（函数（）{}）块。什么是$body.width（），用$（'body'）.innerWidth（）替换它；哇，那个页面让我的Chrome变灰了。你为什么要用画布？使用DOM可以更轻松地完成您的操作。$body.width（）是jQuery的一个函数，用于返回正文的宽度，除此之外，它在滚动脚本中没有使用。@MattFletcher:请详细说明一下好吗？通过发送链接、JSFIDLE或其他方式？我对jQuery/Canvas不是很精通/很好。好吧，我改变了这一点，它不再给出未定义的错误。尽管如此，我的滑块还是有问题。无论如何谢谢你
<!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>
Uncaught ReferenceError: $body is not defined : /ivproject/achtergrond.htm:32