移动端H5开发 Turn.js实现很棒的翻书效果

最近CTO给我分配了一个移动端H5开发的任务，主要功能是需要实现翻书效果，我听过主要需求后，当时是呀！！！接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果，结果效果都不是非常的理想，后来想起自己曾经做过PC版的翻书效果，当时使用的是，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！ Turn.js的官方网址: 下面是我这个项目上线后的效果：

看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：

1、需要引入的脚本文件

2、html部分代码

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <Meta name="format-detection" content="telephone=no"> <Meta name="apple-mobile-web-app-capable" content="yes"/> <Meta name="apple-mobile-web-app-status-bar-style" content="black"/> Turn.js 实现翻书<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_23@ <link rel="stylesheet" type="text/css" href="css/basic.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div class="shade"> <div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> <div class="sk-circle2 sk-circle"></div> <div class="sk-circle3 sk-circle"></div> <div class="sk-circle4 sk-circle"></div> <div class="sk-circle5 sk-circle"></div> <div class="sk-circle6 sk-circle"></div> <div class="sk-circle7 sk-circle"></div> <div class="sk-circle8 sk-circle"></div> <div class="sk-circle9 sk-circle"></div> <div class="sk-circle10 sk-circle"></div> <div class="sk-circle11 sk-circle"></div> <div class="sk-circle12 sk-circle"></div> </div> <div class="number"></div> </div> <div class="flipbook-viewport" style="display:none;"> <div class="prev<a href="/tag/IoU/" target="_blank" class="keywords">IoU</a>sPage"></div> <div class="nextPage"></div> <div class="return"></div> <img class="btnImg" src="./image/btn.gif" style="display: none"/> <div class="container"> <div class="flipbook"> </div> </div> </div> <script> //<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>仿iphone弹出层 (function ($) { //ios confirm <a href="/tag/Box/" target="_blank" class="keywords">Box</a> jQuery.fn.confirm = function (title,option,okCall,cancelCall) { var defaults = { title: null,//what text cancelText: '取消',//the cancel btn text okText: '确定' //the ok btn text }; <p>if (undefined === option) {<br /> option = {};<br /> }<br /> if ('function' != typeof okCall) {<br /> okCall = $.noop;<br /> }<br /> if ('function' != typeof cancelCall) {<br /> cancelCall = $.noop;<br /> }</p> <p>var o = $.extend(defaults,{title: title,okCall: okCall,cancelCall: cancelCall});</p> <p>var $dom = $(this);</p> <p>var dom = $('<div class="g-plugin-confirm">');<br /> var dom1 = $('<div>').appendTo(dom);<br /> var dom_content = $('<div>').html(o.title).appendTo(dom1);<br /> var dom_btn = $('<div>').appendTo(dom1);<br /> var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);<br /> var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);<br /> btn_cancel.on('click',function (e) {<br /> o.cancelCall();<br /> dom.remove();<br /> e.preventDefault();<br /> });<br /> btn_ok.on('click',function (e) {<br /> o.okCall();<br /> dom.remove();<br /> e.preventDefault();<br /> });</p> <p>dom.appendTo($('body'));<br /> return $dom;<br /> };<br /> })(jQuery);</p> <p>//<a href="/tag/shangyiye/" target="_blank" class="keywords">上一页</a><br /> $(".prev<a href="/tag/IoU/" target="_blank" class="keywords">IoU</a>sPage").bind("touchend",function () {<br /> var pageCount = $(".flipbook").turn("pages");//总页数<br /> var currentPage = $(".flipbook").turn("page");//当前页<br /> if (currentPage >= 2) {<br /> $(".flipbook").turn('page',currentPage - 1);<br /> } else {<br /> }<br /> });<br /> // <a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a><br /> $(".nextPage").bind("touchend",function () {<br /> var pageCount = $(".flipbook").turn("pages");//总页数<br /> var currentPage = $(".flipbook").turn("page");//当前页<br /> if (currentPage <= pageCount) {<br /> $(".flipbook").turn('page',currentPage + 1);<br /> } else {<br /> }<br /> });<br /> //返回到目录页<br /> $(".return").bind("touchend",function () {<br /> $(document).confirm('您确定要返<a href="/tag/huishouye/" target="_blank" class="keywords">回首页</a>吗?',{},function () {<br /> $(".flipbook").turn('page',1); //@R<em>96</em><a href="/tag/404/" target="_blank" class="keywords">404</a>@数<br /> },function () {<br /> });<br /> });</p> </script> </body> </html> </pre> </div> <p><h3>3、主要js实现部分 </h3></p> <div class="jb51code"> <pre class="brush:js;"> /** * Created by ChengYa on 2016/6/18. */ <p>//判断手机类型<br /> window.onload = function () {<br /> //alert($(window).height());<br /> var u = navigator.userAgent;<br /> if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机<br /> } else if (u.indexOf('iPhone') > -1) {//苹果手机<br /> //<a href="/tag/pingbi/" target="_blank" class="keywords">屏蔽</a>ios下上下弹性<br /> $(window).on('scroll.elasticity',function (e) {<br /> e.preventDefault();<br /> }).on('touchmove.elasticity',function (e) {<br /> e.preventDefault();<br /> });<br /> } else if (u.indexOf('Windows Phone') > -1) {//winphone手机<br /> }<br /> //<a href="/tag/yujiazai/" target="_blank" class="keywords">预加载</a><br /> loading();<br /> }</p> <p>var date_start;<br /> var date_end;<br /> date_start = getNowFormatDate();<br /> //加载<a href="/tag/tupian/" target="_blank" class="keywords">图片</a><br /> var loading_img_url = [<br /> "./image/0001.jpg","./image/0002.jpg","./image/0003.jpg","./image/0004.jpg","./image/0005.jpg","./image/0006.jpg","./image/0007.jpg","./image/0008.jpg","./image/0009.jpg","./image/0010.jpg","./image/0011.jpg","./image/0012.jpg","./image/0013.jpg","./image/0014.jpg","./image/0015.jpg","./image/0016.jpg","./image/0017.jpg","./image/0018.jpg","./image/0019.jpg","./image/0020.jpg","./image/0021.jpg","./image/0022.jpg","./image/0023.jpg","./image/0024.jpg","./image/0025.jpg","./image/0026.jpg","./image/0027.jpg","./image/0028.jpg","./image/0029.jpg","./image/0030.jpg","./image/0031.jpg","./image/0032.jpg","./image/0033.jpg","./image/0034.jpg","./image/0035.jpg","./image/0036.jpg","./image/0037.jpg","./image/0038.jpg","./image/0039.jpg","./image/0040.jpg","./image/0041.jpg",];</p> <p>//加载<a href="/tag/yemian/" target="_blank" class="keywords">页面</a><br /> function loading() {<br /> var numbers = 0;<br /> var length = loading_img_url.length;</p> <p>for (var i = 0; i < length; i++) {<br /> var img = new Image();<br /> img.src = loading_img_url[i];<br /> img.onerror = function () {<br /> numbers += (1 / length) <em> 100;<br /> }<br /> img.onload = function () {<br /> numbers += (1 / length) </em> 100;<br /> $('.number').html(parseInt(numbers) + "%");<br /> console.log(numbers);<br /> if (Math.round(numbers) == 100) {<br /> //$('.number').hide();<br /> date_end = getNowFormatDate();<br /> var loading_time = date_end - date_start;<br /> //<a href="/tag/yujiazai/" target="_blank" class="keywords">预加载</a><a href="/tag/tupian/" target="_blank" class="keywords">图片</a><br /> $(function progressbar() {<br /> //拼接<a href="/tag/tupian/" target="_blank" class="keywords">图片</a><br /> $('.shade').hide();<br /> var tagHtml = "";<br /> for (var i = 1; i <= 41; i++) {<br /> if (i == 1) {<br /> tagHtml += ' <div id="first" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';<br /> } else if (i == 41) {<br /> tagHtml += ' <div id="end" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';<br /> } else {<br /> tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';<br /> }<br /> }<br /> $(".flipbook").append(tagHtml);<br /> var w = $(".graph").width();<br /> $(".flipbook-viewport").show();<br /> });<br /> //配置turn.js<br /> function loadApp() {<br /> var w = $(window).width();<br /> var h = $(window).height();<br /> $('.flipboox').width(w).height(h);<br /> $(window).resize(function () {<br /> w = $(window).width();<br /> h = $(window).height();<br /> $('.flipboox').width(w).height(h);<br /> });<br /> $('.flipbook').turn({<br /> // Width<br /> width: w,// Height<br /> height: h,// Elevation<br /> elevation: 50,display: 'single',// Enable gradients<br /> gradients: true,// Auto center this flipbook<br /> autoCenter: true,when: {<br /> turning: function (e,page,view) {<br /> if (page == 1) {<br /> $(".btnImg").css("display","none");<br /> $(".mark").css("display","block");<br /> } else {<br /> $(".btnImg").css("display","block");<br /> $(".mark").css("display","none");<br /> }<br /> if (page == 41) {<br /> $(".nextPage").css("display","none");<br /> } else {<br /> $(".nextPage").css("display","block");<br /> }<br /> },turned: function (e,view) {<br /> console.log(page);<br /> var total = $(".flipbook").turn("pages");//总页数<br /> if (page == 1) {<br /> $(".return").css("display","none");<br /> $(".btnImg").css("display","none");<br /> } else {<br /> $(".return").css("display","block");<br /> $(".btnImg").css("display","block");<br /> }<br /> if (page == 2) {<br /> $(".catalog").css("display","block");<br /> } else {<br /> $(".catalog").css("display","none");<br /> }<br /> }<br /> }<br /> })<br /> }<br /> yepnope({<br /> test: Modernizr.csstransforms,yep: ['js/turn.js'],complete: loadApp<br /> });<br /> }<br /> ;<br /> }<br /> }<br /> }</p> <p>function getNowFormatDate() {<br /> var date = new Date();<br /> var seperator1 = "";<br /> var seperator2 = "";<br /> var month = date.getMonth() + 1;<br /> var strDate = date.getDate();<br /> if (month >= 1 && month <= 9) {<br /> month = "0" + month;<br /> }<br /> if (strDate >= 0 && strDate <= 9) {<br /> strDate = "0" + strDate;<br /> }<br /> var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate</p> <ul> <li>"" + date.getHours() + seperator2 + date.getMinutes()</li> <li>seperator2 + date.getSeconds();<br /> return currentdate;<br /> }</li> </ul> </pre> </div> <p><h3>4、最终实现结果</h3> </p> <p style="text-align: center"><img src="https://files.jb51.cc/file_images/article/201606/201606200843047.gif" /></p> <p><span style="color: #800000"><h3>注：</h3><a href="/tag/tupian/" target="_blank" class="keywords">图片</a>是从网上随便下载的，所以<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>的尺寸不规范，导致在手机上浏览时<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>不是很完整<h3>【不是因为<a href="/tag/daima/" target="_blank" class="keywords">代码</a>写的有问题哦】 </h3>!!! <a href="/tag/daima/" target="_blank" class="keywords">代码</a>打包中没有加入真实项目中的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>，如需看到最佳的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>，建议<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>尺寸设计为:750*1217，由于个人的时间和精力有限，我写的这个Demo使用的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>就没有将<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>一一<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>为750*1217的尺寸。 </p> <p>源码下载：<a href="http://xiazai.jb51.cc/201606/yuanma/Turn.js-fanshu(jb51.cc).rar">http://xiazai.jb51.cc/201606/yuanma/Turn.js-fanshu(jb51.cc).rar</a></p> <p>以上就是本文的全部<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p></div> <div class="topcard-tags"><a href="/tag/yidongduan/" class="tag_link" target="_blank">移动端</a><a href="/tag/fanshu/" class="tag_link" target="_blank">翻书</a></div> <ul class="list-group"> <li class="list-group-item"><a href="/js/47770.html" title="prototype.js常用函数详解">上一篇：prototype.js常用函数详解</a><a href="/js/47761.html" title="JS控制层作圆周运动的方法" class="text-muted pull-right">下一篇：JS控制层作圆周运动的方法</a> </li> </ul> </div> </div> </div>  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的JavaScript相关文章</h1></div> <div class="list_con"> <a href="/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div> <div class="summary">事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div> <div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div> <div class="summary">什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码"><div class="title">前端对base64编码的理解，原生js实现字符base64编码</div> <div class="summary">@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div> <div class="summary">搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div> <div class="summary">起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div> <div class="summary">js判断undefined js判断null js判断null和undefined</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div> <div class="summary">http://patorjk.com/software/taag/</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div> <div class="summary">今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div> <div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div>   <div class="col-sm-12 col-md-12 col-lg-3">  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li> <li><a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li> <li><a href="/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂：前端跨域问题JS解决</a></li> <li><a href="/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解，</a></li> <li><a href="/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂：MVVM模型以及VUE中的</a></li> <li><a href="/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li> <li><a href="/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li> <li><a href="/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li> <li><a href="/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li> <li><a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li> </ul> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>  </div>  </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程，小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程，小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程，小白也能轻松搞定！" target="_blank">· 联想笔记本一键重装Win10系统图文教程，小白也能...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程：从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程：从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="/js/base.js"></script> </body> </html>