首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 16, 2017

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

首先附上个人的文件路径

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

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

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

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

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

接下来  我们开始使将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

最后   展示一下实现的效果，很流畅！！！！

附上源码地址：

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

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

- Author -

zwh-android&&java

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
canvas时钟效果
Feb 16 #Javascript
ad hoc(1) SWL(1) LW(1) FM(4) GWEN(1) 中波(3) 调幅(1) SW(1) 调频(4) KDKA(1)
You might like
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
动态表格Table类的实现
2009/08/26 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
React Native验证码倒计时工具类分享
2017/10/24 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
node+multer实现图片上传的示例代码
2020/02/18 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
墨西哥网上超市：Superama
2018/07/10 全球购物
活动总结怎么写
2014/04/28 职场文书
促销活动总结模板
2014/07/01 职场文书
争先创优演讲稿
2014/09/15 职场文书
领导视察通讯稿
2015/07/18 职场文书
健康教育主题班会
2015/08/14 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python