自定义单页滑块无法工作
A custom one-page slider is not working
我正在做一个单页的网站。你滚动/浏览网站的方式是通过一个自定义的"滑块",由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>
Uncaught ReferenceError: $body is not defined : /ivproject/achtergrond.htm:32
将$body
更改为$('body')
或将var $body = $('body');
行添加到$(document).ready(function(){});
块
相关文章:
- 带有url的单页网站导航
- 如何照顾CSRF&单页应用程序中不使用cookie的XSS攻击
- 遗漏中间部分的单页点导航
- WordPress驱动的单页应用程序,具有通用JavaScript
- Backbone.js和PhoneGap,单页或多页
- Jquery手机单页app+视频+动态变化视频
- 在非SPA(单页应用程序)中使用Require.js和Backbone
- 单页应用程序的javascript集成测试
- 如何在单页应用程序中重新绘制图像
- 如何计算angular JS应用程序(单页应用程序)的页面加载时间
- Dojo:在单页应用程序中交换两个不同的视图
- AngularJS单页应用程序中的Toggable选项卡
- 单页应用程序中的登录页面
- 在单页应用程序上进行客户端路由的正确方法是什么
- 聚合物单页应用程序不工作
- 自定义单页滑块无法工作
- 无法让Disqus在单页应用程序中正常工作
- 单页导航无法正常工作
- AngularJs 项目不能作为单页 Web 应用程序工作
- 单页导航无法正常工作.为什么