javaScript+turn.js实现图书翻页效果实例代码

为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单!

首先附上个人的文件路径

对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件    所以
我们想展示的资源  就放在这个目录下面!!!!!!

接下来  先给大家看一下pages下面的资源名称

可以看到  所有的资源都以数字命名  至于为什么  我们在之后会讲解

接下来  我们开始使将turn.js结合到我们自己的项目中  先附上index.html中的代码

<!doctype html><!--[if lt IE 7 ]>
<html lang="en" class="ie6">
<![endif]--><!--[if IE 7 ]>
<html lang="en" class="ie7">
<![endif]--><!--[if IE 8 ]>
<html lang="en" class="ie8">
<![endif]--><!--[if IE 9 ]>
<html lang="en" class="ie9">
<![endif]--><!--[if !IE]>
<!-->
<html lang="en">
<!--<![endif]-->
<head>
 <title>Using turn.js and the new zoom feature</title>
 <meta name="viewport" content="width = 1050, user-scalable = no"/>
 <link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="js/jquery.min.1.7.js"></script>
 <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
 <script type="text/javascript" src="js/hash.js"></script>
 <script type="text/javascript" src="js/turn.js"></script>
 <script type="text/javascript" src="js/turn.html4.min.js"></script>
 <script type="text/javascript" src="js/zoom.min.js"></script>
 <script type="text/javascript" src="js/magazine.js"></script>
 <script>
 $(function () {
  var next_button = $(".next-button");  //初始化左右箭头
  var previous_button = $(".previous-button");
  setArrows();
 });
 </script>
</head>
<body>
<div id="canvas">
 <!-- 右上角放大缩小按钮 -->
 <div class="zoom-icon zoom-icon-in">
 </div>
 <div class="magazine-viewport">
 <div class="container">
  <div class="magazine">
  <!-- Next button --></div>
 </div>
 <div ignore="1" class="next-button">
 </div>
 <!-- Previous button -->
 <div ignore="1" class="previous-button">
 </div>
 </div>
 <script type="text/javascript">
 function loadApp() {
  $('#canvas').fadeIn(1000);
  var flipbook = $('.magazine');
  // Check if the CSS was already loaded
  if (flipbook.width() == 0 || flipbook.height() == 0) {
  setTimeout(loadApp, 10);
  return;
  }
  // 创建flipbook
  flipbook.turn({
  width: 1200,
  height: 781,
  duration: 1000, //翻页速度,值越小越快
  // Hardware acceleration
  acceleration: !isChrome(),
  // Enables gradients
  gradients: true,
  // Auto center this flipbook
  autoCenter: true,
  // Elevation from the edge of the flipbook when turning a page
  elevation: 50,
  // The number of pages
  pages: 8,
  // Events
  when: {
   turning: function (event, page, view) {
   var book = $(this),
    currentPage = book.turn('page'),
    pages = book.turn('pages');
   // Update the current URI
   Hash.go('page/' + page).update();
   // Show and hide navigation buttons
   disableControls(page);
   },
   turned: function (event, page, view) {
   disableControls(page);
   $(this).turn('center');
   if (page == 1) {
    $(this).turn('peel', 'br');
   }
   },
   missing: function (event, pages) {
   // Add pages that aren't in the magazine
   for (var i = 0; i < pages.length; i++)
    addPage(pages[i], $(this));
   }
  }
  });
  // Zoom.js
  $('.magazine-viewport').zoom({
  flipbook: $('.magazine'),
  max: function () {
   return largeMagazineWidth() / $('.magazine').width();
  },
  when: {
   swipeLeft: function () {
   $(this).zoom('flipbook').turn('next');
   },
   swipeRight: function () {
   $(this).zoom('flipbook').turn('previous');
   },
   resize: function (event, scale, page, pageElement) {
   if (scale == 1)
    loadSmallPage(page, pageElement);
   else
    loadLargePage(page, pageElement);
   },
   zoomIn: function () {
   $('.made').hide();
   $('.magazine').removeClass('animated').addClass('zoom-in');
   $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
   if (!window.escTip && !$.isTouch) {
    escTip = true;
    $('<div />', {'class': 'exit-message'}).
    html('<div>Press ESC to exit</div>').
    appendTo($('body')).
    delay(2000).
    animate({opacity: 0}, 500, function () {
    $(this).remove();
    });
   }
   },
   zoomOut: function () {
   $('.exit-message').hide();
   $('.thumbnails').fadeIn();
   $('.made').fadeIn();
   $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
   setTimeout(function () {
    $('.magazine').addClass('animated').removeClass('zoom-in');
    resizeViewport();
   }, 0);
   }
  }
  });
  // Zoom event
  if ($.isTouch)
  $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
  else
  $('.magazine-viewport').bind('zoom.tap', zoomTo);
  // Using arrow keys to turn the page
  $(document).keydown(function (e) {
  var previous = 37, next = 39, esc = 27;
  switch (e.keyCode) {
   case previous:
   // left arrow
   $('.magazine').turn('previous');
   e.preventDefault();
   break;
   case next:
   //right arrow
   $('.magazine').turn('next');
   e.preventDefault();
   break;
   case esc:
   $('.magazine-viewport').zoom('zoomOut');
   e.preventDefault();
   break;
  }
  });
  // URIs - Format #/page/1
  Hash.on('^page\/([0-9]*)$', {
  yep: function (path, parts) {
   var page = parts[1];
   if (page !== undefined) {
   if ($('.magazine').turn('is'))
    $('.magazine').turn('page', page);
   }
  },
  nop: function (path) {
   if ($('.magazine').turn('is'))
   $('.magazine').turn('page', 1);
  }
  });
  $(window).resize(function () {
  resizeViewport();
  }).bind('orientationchange', function () {
  resizeViewport();
  });
  // Events for thumbnails
  $('.thumbnails').click(function (event) {
  var page;
  if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
   $('.magazine').turn('page', page[1]);
  }
  });
  $('.thumbnails li').
  bind($.mouseEvents.over, function () {
  $(this).addClass('thumb-hover');
  }).bind($.mouseEvents.out, function () {
  $(this).removeClass('thumb-hover');
  });
  if ($.isTouch) {
  $('.thumbnails').
  addClass('thumbanils-touch').
  bind($.mouseEvents.move, function (event) {
   event.preventDefault();
  });
  } else {
  $('.thumbnails ul').mouseover(function () {
   $('.thumbnails').addClass('thumbnails-hover');
  }).mousedown(function () {
   return false;
  }).mouseout(function () {
   $('.thumbnails').removeClass('thumbnails-hover');
  });
  }
  // Regions
  if ($.isTouch) {
  $('.magazine').bind('touchstart', regionClick);
  } else {
  $('.magazine').click(regionClick);
  }
  // Events for the next button
  $('.next-button').bind($.mouseEvents.over, function () {
  $(this).addClass('next-button-hover');
  }).bind($.mouseEvents.out, function () {
  $(this).removeClass('next-button-hover');
  }).bind($.mouseEvents.down, function () {
  $(this).addClass('next-button-down');
  }).bind($.mouseEvents.up, function () {
  $(this).removeClass('next-button-down');
  }).click(function () {
  $('.magazine').turn('next');
  setTimeout(function () {
   setArrows();
  }, 300);
  });
  // Events for the next button
  $('.previous-button').bind($.mouseEvents.over, function () {
  $(this).addClass('previous-button-hover');
  }).bind($.mouseEvents.out, function () {
  $(this).removeClass('previous-button-hover');
  }).bind($.mouseEvents.down, function () {
  $(this).addClass('previous-button-down');
  }).bind($.mouseEvents.up, function () {
  $(this).removeClass('previous-button-down');
  }).click(function () {
  $('.magazine').turn('previous');
  setTimeout(function () {
   setArrows();
  }, 300);
  });
  resizeViewport();
  $('.magazine').addClass('animated');
 }
 // Zoom icon
 $('.zoom-icon').bind('mouseover', function () {
  if ($(this).hasClass('zoom-icon-in'))
  $(this).addClass('zoom-icon-in-hover');
  if ($(this).hasClass('zoom-icon-out'))
  $(this).addClass('zoom-icon-out-hover');
 }).bind('mouseout', function () {
  if ($(this).hasClass('zoom-icon-in'))
  $(this).removeClass('zoom-icon-in-hover');
  if ($(this).hasClass('zoom-icon-out'))
  $(this).removeClass('zoom-icon-out-hover');
 }).bind('click', function () {
  if ($(this).hasClass('zoom-icon-in'))
  $('.magazine-viewport').zoom('zoomIn');
  else if ($(this).hasClass('zoom-icon-out'))
  $('.magazine-viewport').zoom('zoomOut');
 });
 $('#canvas').hide();
 // Load the HTML4 version if there's not CSS transform
 yepnope({
  test: Modernizr.csstransforms,
  yep: ['js/turn.js'],
  nope: ['js/turn.html4.min.js'],
  both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
  complete: loadApp
 });
 </script>
</div>
</body>
</html>
<![endif]--></div>
</html>
</html>
</html>
</html> 

一:在其中值得注意的是:对于js的引用 有两处!

1:是开头这里引用了css和js

<link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/hash.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<script type="text/javascript" src="js/turn.html4.min.js"></script>
<script type="text/javascript" src="js/zoom.min.js"></script>
<script type="text/javascript" src="js/magazine.js"></script> 

2:则是index.html的最下方,这里极容易被忽视!!!切记路径不可错误,不然报错!!!!

// Load the HTML4 version if there's not CSS transform
yepnope({
 test: Modernizr.csstransforms,
 yep: ['js/turn.js'],
 nope: ['js/turn.html4.min.js'],
 both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
 complete: loadApp
}); 

二:js中的magazine.js   这个js值整个功能实现的支柱   在这里提供了所有的函数。

/*
 * Magazine sample
*/
//这里是对前页后页的位置设定
function setArrows() {
 /*var width = $(window).width();
 //alert("chushihua"+width);
 var height = $(window).height();
 var bookWidth = $(".magazine").width();
 var bookHeight = $(".magazine").height();
 //alert("chushihua"+bookWidth);
 var arrowSize = $(".next-button").width();
 //alert(arrowSize);
 alert($(".magazine").offset().left+"\n"+$('.next-button').offset().left);
 var LeftArrowLeft = - ( width - bookWidth ) / 4 + 'px' ;
 //alert(LeftArrowLeft);
 var RightArrowLeft = - ( width - bookWidth+ arrowSize*2) / 4 + 'px' ;
 //alert(RightArrowLeft);
 //alert(RightArrowLeft);
 //alert("zhihou"+bookWidth);
 $('.next-button').css( "right",RightArrowLeft );
 $('.previous-button').css( "left", LeftArrowLeft );*/
 setTimeout(function(){
 var width = $(window).width();
 var bookWidth = $(".magazine").width();
 var arrowSize = $(".next-button").width();
 var magaLeft=$(".magazine").offset().left;
 var nextLeft= (width-bookWidth-magaLeft-60)/2;
 //alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
 $('.next-button').animate({ "right":nextLeft},300);
 $('.previous-button').animate({ "left":nextLeft},300);
 },100);
}
//这是用于加载所有的待展示资源
function addPage(page, book) {
 var id, pages = book.turn('pages');
 // Create a new element for this page
 var element = $('<div />', {});
 // Add the page to the flipbook
 if (book.turn('addPage', element, page)) {
 // Add the initial HTML
 // It will contain a loader indicator and a gradient
 element.html('<div class="gradient"></div><div class="loader"></div>');
 // Load the page
 loadPage(page, element);
 }
}
function loadPage(page, pageElement) {
 // Create an image element
 var img = $('<img />');
 img.mousedown(function(e) {
 e.preventDefault();
 });
 img.load(function() {
 // Set the size
 $(this).css({
  width: '100%',
  height: '100%'
 });
 // Add the image to the page after loaded
 $(this).appendTo(pageElement);
 // Remove the loader indicator
 pageElement.find('.loader').remove();
 });
 // Load the page
 img.attr('src', 'pages/' + page + '.png');//这里就是指向展示资源路径,pages/即之前提及的pages文件夹,根据需要可更换。
 loadRegions(page, pageElement);
}
// 这里是识别预览大图还是小图的模式1为大图
function zoomTo(event) {
 setTimeout(function() {
 if ($('.magazine-viewport').data().regionClicked) {
  $('.magazine-viewport').data().regionClicked = false;
 } else {
  if ($('.magazine-viewport').zoom('value') == 1) {
  $('.magazine-viewport').zoom('zoomIn', event);
  } else {
  $('.magazine-viewport').zoom('zoomOut');
  }
 }
 },
 1);
}
// 不需了解
function loadRegions(page, element) {
 $.getJSON('pages/' + page + '-regions.json').done(function(data) {
 $.each(data,
 function(key, region) {
  addRegion(region, element);
 });
 });
}
// 不需了解
function addRegion(region, pageElement) {
 var reg = $('<div />', {
 'class': 'region ' + region['class']
 }),
 options = $('.magazine').turn('options'),
 pageWidth = options.width / 2,
 pageHeight = options.height;
 reg.css({
 top: Math.round(region.y / pageHeight * 100) + '%',
 left: Math.round(region.x / pageWidth * 100) + '%',
 width: Math.round(region.width / pageWidth * 100) + '%',
 height: Math.round(region.height / pageHeight * 100) + '%'
 }).attr('region-data', $.param(region.data || ''));
 reg.appendTo(pageElement);
}
function regionClick(event) {
 var region = $(event.target);
 if (region.hasClass('region')) {
 $('.magazine-viewport').data().regionClicked = true;
 setTimeout(function() {
  $('.magazine-viewport').data().regionClicked = false;
 },
 100);
 var regionType = $.trim(region.attr('class').replace('region', ''));
 return processRegion(region, regionType);
 }
}
// 不需了解
function processRegion(region, regionType) {
 data = decodeParams(region.attr('region-data'));
 switch (regionType) {
 case 'link':
 window.open(data.url);
 break;
 case 'zoom':
 var regionOffset = region.offset(),
 viewportOffset = $('.magazine-viewport').offset(),
 pos = {
  x: regionOffset.left - viewportOffset.left,
  y: regionOffset.top - viewportOffset.top
 };
 $('.magazine-viewport').zoom('zoomIn', pos);
 break;
 case 'to-page':
 $('.magazine').turn('page', data.page);
 break;
 }
}
// 加载大图
function loadLargePage(page, pageElement) {
 var img = $('<img />');
 img.load(function() {
 var prevImg = pageElement.find('img');
 $(this).css({
  width: '100%',
  height: '100%'
 });
 $(this).appendTo(pageElement);
 prevImg.remove();
 });
 // Loadnew page
 img.attr('src', 'pages/' + page + '-large.png');//这里指向大图路径,当点击预览大图的时候,加载该路径,可根据需要更换。
}
// 加载小图
function loadSmallPage(page, pageElement) {
 var img = pageElement.find('img');
 img.css({
 width: '100%',
 height: '100%'
 });
 img.unbind('load');
 // Loadnew page
 img.attr('src', 'pages/' + page + '.png');//指向小图路径,同上
}
// 判断浏览器
function isChrome() {
 return navigator.userAgent.indexOf('Chrome') != -1;
}
function disableControls(page) {
 if (page == 1) $('.previous-button').hide();
 else $('.previous-button').show();
 if (page == $('.magazine').turn('pages')) $('.next-button').hide();
 else $('.next-button').show();
}
// 为图书设置宽高
function resizeViewport() {
 var width = $(window).width(),
 height = $(window).height(),
 options = $('.magazine').turn('options');
 $('.magazine').removeClass('animated');
 $('.magazine-viewport').css({
 width: width,
 height: height
 }).zoom('resize');
 setArrows() ;
 if ($('.magazine').turn('zoom') == 1) {
 var bound = calculateBound({
  width: options.width,
  height: options.height,
  boundWidth: Math.min(options.width, width),
  boundHeight: Math.min(options.height, height)
 });
 if (bound.width % 2 !== 0) bound.width -= 1;
 if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) {
  $('.magazine').turn('size', bound.width, bound.height);
  if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br');
 }
 $('.magazine').css({
  top: -bound.height / 2,
  left: -bound.width / 2
 });
 }
 var magazineOffset = $('.magazine').offset(),
 boundH = height - magazineOffset.top - $('.magazine').height(),
 marginTop = (boundH - $('.thumbnails > div').height()) / 2;
 if (marginTop < 0) {
 $('.thumbnails').css({
  height: 1
 });
 } else {
 $('.thumbnails').css({
  height: boundH
 });
 $('.thumbnails > div').css({
  marginTop: marginTop
 });
 }
 if (magazineOffset.top < $('.made').height()) $('.made').hide();
 else $('.made').show();
 $('.magazine').addClass('animated');
}
//这里用于返回待预览资源的个数(即书本的页数)
function numberOfViews(book) {
 return book.turn('pages') / 2 + 1;
}
// 当前页
function getViewNumber(book, page) {
 return parseInt((page || book.turn('page')) / 2 + 1, 10);
}
// 记录宽度
function largeMagazineWidth() {
 return 2214;
}
function decodeParams(data) {
 var parts = data.split('&'),
 d,
 obj = {};
 for (var i = 0; i < parts.length; i++) {
 d = parts[i].split('=');
 obj[decodeURIComponent(d[0])] = decodeURIComponent(d[1]);
 }
 return obj;
}
function calculateBound(d) {
 var bound = {
 width: d.width,
 height: d.height
 };
 if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
 var rel = bound.width / bound.height;
 if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) {
  bound.width = Math.round(d.boundHeight * rel);
  bound.height = d.boundHeight;
 } else {
  bound.width = d.boundWidth;
  bound.height = Math.round(d.boundWidth / rel);
 }
 }
 return bound;
} 

在掌握到这些后  便可使用turn.js

最后   展示一下实现的效果,很流畅!!!!

附上源码地址:

TurnBook-150328124836.rar

以上所述是小编给大家介绍的javaScript+turn.js实现图书翻页效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-02-15

react.js 翻页插件实例代码

废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

移动端翻页插件dropload.js(支持Zepto和jQuery)

dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 一.解决方案 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDropLoad.prototype.setHasData = function(i

JavaScript 拖拽翻页效果代码

拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40

Js实现网页键盘控制翻页的方法

本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre

javascript 翻页测试页(动态创建标签并自动翻页)

翻页测试页 $(id).scrollHeight - $(id).offsetHeight) { moveto = $(id).scrollHeight - $(id).offsetHeight; } if(Math.abs($(id).scrollTop - moveto) $(id).scrollHeight - $(id).offsetHeight) { moveto = $(id).scrollHeight - $(id).offsetHeight; } scrollTo(id,move

Javascript表格翻页效果的具体实现

表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {

Javascript表格翻页效果实现思路及代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover

按键盘方向键翻页跳转的javascript代码(支持ie,firefox)

网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev

jsp 使用jstl实现翻页实例代码

使用jstl进行显示相对使用jsp来说代码更显得整齐,也使代码量显得较少 复制代码 代码如下: <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c"  uri = "http://java.sun.com/jsp/jstl/core"

js实现翻页后保持checkbox选中状态的实现方法

项目中的分页使用真分页,每次点击上下页按钮后,再次调用后台方法查询,重新刷新此页面.所以checkbox为false. 比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页. 但是项目中有着需求,所以只能完成实现. 项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的checkbox不变. 界面如下: 实现的思路如下: 在界面中,使用纯js完成.把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到ac

JavaScript实现翻页功能(附效果图)

效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn

jsp实现上一页下一页翻页功能(示例代码)

前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

CSS3+JavaScript实现翻页幻灯片效果

先上效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position

Android开发之手势检测及通过手势实现翻页功能的方法

本文实例讲述了Android开发之手势检测及通过手势实现翻页功能的方法.分享给大家供大家参考,具体如下: 手势是指用户手指或触摸笔在触摸屏上的连续触碰的行为,比如在屏幕上从左至右划出的一个动作,就是手势,再比如在屏幕上画出一个圆圈也是手势.手势这种连续的触碰会形成某个方向上的移动趋势,也会形成一个不规则的几何图形.Android对两种手势行为都提供了支持: 1. 对于第一种手势行为而言,Android提供了手势检测,并为手势检测提供了相应的监听器. 2. 对于第二种手势行为,Android允许开

python tkiner实现 一个小小的图片翻页功能的示例代码

具体代码如下所示: import tkinter as tk import tkinter.messagebox import copy import os,sys def get_picture(dirs): '''获得所有图片''' picture_list = [] for dir,dir_abs,files in os.walk(dirs): for file in files: if file.endswith('.gif'): picture_list.append(os.path.

基于Vue2.0+ElementUI实现表格翻页功能

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

bootstrap table实现点击翻页功能 可记录上下页选中的行

bootstrap-table中实现,翻页之后再返回,依然选中的情况,具体内容如下 //var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据 var productids = $('textarea'); var merge_order_object= {};//页码+id组成的对象 var jsonObj = {}; var current_page = &q

不错的Javascript表格翻页效果

表格翻页 body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } 2) days = arguments[2]; if(arguments.length > 3) path = arguments[3]; with(new Date()){ setDate(getDate()+days); days=toUTCString();