barba.js 原理就是在a页面中显示b页面的内容，样式为刷新，给用户以页面跳转后无刷新体验，注意样式命名，ab页面引用的样式和js要相同
- 可以在页面之间创建良好的转换，增强用户的体验。
- 减少HTTP请求 （为什么重新加载每个页面上的css / js？）
- 可以使用预取和缓存来加快导航
a.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> <link href="css/a.css" rel="stylesheet"> </head> <body> <div id="barba-wrapper"> <div class="barba-container"> <div class="wrap"> <div> <a href="b.html">页面跳转到b</a> </div> </div> </div> </div> </body> <script src="js/barba.min.js" type="text/javascript"></script> <script> Barba.Pjax.start(); </script> </html>
b.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> <link href="css/a.css" rel="stylesheet"> </head> <body> <div id="barba-wrapper"> <div class="barba-container"> <div class="wrap1"> <div> <a href="a.html">页面跳转到a</a> </div> </div> </div> </div> </body> <script src="js/barba.min.js" type="text/javascript"></script> <script> Barba.Pjax.start(); </script> </html>
a.css
.wrap { margin: 50px; width: 2500px; height: 2500px; background: url('../images/30.png') 100% 100%; } .wrap1 { margin: 50px; width: 750px; height: 930px; background: url('../images/36.png') repeat; }