使用jquery中的文本框在“动画书”中显示相应的div
我正在使用“动画书”网站的“书架”主题。现在我在这里添加了一个文本框来显示特定的页面。当用户试图直接浏览页面时，他必须在该文本框中输入页码。但这对我来说似乎是不可能的。我尝试了很多 这是该主题的链接 我在这里添加了代码 请帮助我。这是我的第一个项目，必须交给客户使用jquery中的文本框在“动画书”中显示相应的div,jquery,html,Jquery,Html,我正在使用“动画书”网站的“书架”主题。现在我在这里添加了一个文本框来显示特定的页面。当用户试图直接浏览页面时，他必须在该文本框中输入页码。但这对我来说似乎是不可能的。我尝试了很多 这是该主题的链接 我在这里添加了代码 请帮助我。这是我的第一个项目，必须交给客户 <!DOCTYPE html> <html lang="en" class="no-js demo-2"> <head> <script src="js/moderni
<!DOCTYPE html>
<html lang="en" class="no-js demo-2">
<head>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/codrops/2012/08/29/multiple-area-charts-with-d3-js/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>BookBlock <span>A Content Flip Plugin</span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
</nav>
</header>
<div class="main clearfix">
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/1.jpg" alt="image01"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/2.jpg" alt="image02"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/3.jpg" alt="image03"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/4.jpg" alt="image04"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/5.jpg" alt="image05"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/6.jpg" alt="image06"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/7.jpg" alt="image07"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/8.jpg" alt="image08"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/9.jpg" alt="image09"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/10.jpg" alt="image10"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/11.jpg" alt="image11"/>
</div>
<div class="bb-item">
<img class="bb-custom-img" src="images/demo2/12.jpg" alt="image12"/>
</div>
</div>
<nav>
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
</nav>
</div>
<input type="text" name="pageno"><input type="button" >
</div>
</div><!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' )
},
init = function() {
config.$bookBlock.bookblock( {
orientation : 'horizontal',
speed : 700
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );
// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.up:
config.$bookBlock.bookblock( 'prev' );
e.preventDefault();
break;
case arrow.down:
config.$bookBlock.bookblock( 'next' );
e.preventDefault();
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>
</body>
</html>
BookBlock内容翻转插件
变量页=（函数（）{
变量配置={
$书架：$（“#bb书架”），
$navNext:$（“#bb nav next”），
$navPrev:$（“#bb nav prev”）
},
init=函数（）{
配置$bookBlock.bookBlock（{
方向：“水平”，
速度：700
} );
initEvents（）；
},
initEvents=函数（）{
var$slides=config.$bookBlock.children（）；
//添加导航事件
config.$navNext.on（'单击touchstart'，函数（）{
config.$bookBlock.bookBlock（'next'）；
返回false；
} );
配置$navPrev.on（'单击touchstart'，函数（）{
配置$bookBlock.bookBlock（'prev'）；
返回false；
} );
//添加键盘事件
$（文档）.keydown（函数（e）{
var keyCode=e.keyCode | e.which，
箭头={
左：37，
上升：38，
右：39，
下降：40
};
开关（钥匙代码）{
大小写箭头.up：
配置$bookBlock.bookBlock（'prev'）；
e、 预防默认值（）；
打破
大小写箭头。向下：
config.$bookBlock.bookBlock（'next'）；
e、 预防默认值（）；
打破
}
} );
};
返回{init:init}；
})();
Page.init（）；
$（'bb bookblock'）。bookblock（'jump'，position）