发布于 2017-02-12 01:46:35 | 173 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常好的用户体验。
HTML
HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的。
<nav class="cd-side-navigation">
<ul>
<li>
<a href="index.html" class="selected" data-menu="index">
<svg><!-- svg content here --></svg>
Intro
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- other list items here -->
</ul>
</nav> <!-- .cd-dashboard -->
<main class="cd-main">
<section class="cd-section index visible">
<header>
<div class="cd-title">
<h2>Animated Page Transition #2</h2>
<span>Some text here</span>
</div>
<a href="#index-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="index-content">
<!-- content here -->
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar -->
CSS
我们将.cd-side-navigation固定在页面左侧，并且设置它的高度为100%，这样左侧导航菜单就始终占据左侧边栏，右侧主体内容滚动时，左侧导航菜单不动。
.cd-side-navigation {
position: fixed;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
width: 94px;
overflow: hidden;
}
.cd-side-navigation ul {
height: 100%;
overflow-y: auto;
}
.cd-side-navigation::before {
/* background color of the side navigation */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 4px);
background-color: #131519;
}
.cd-side-navigation li {
width: calc(100% - 4px);
}
.cd-side-navigation a {
display: block;
position: relative;
}
.cd-side-navigation a::after {
/* 4px line to the right of the item - visible on hover */
content: '';
position: absolute;
top: 0;
right: -4px;
height: 100%;
width: 4px;
background-color: #83b0b9;
opacity: 0;
}
.no-touch .cd-side-navigation a:hover::after {
opacity: 1;
}JavaScript
当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数：loadNewContent()。
function loadingBarAnimation() {
var scaleMax = loadingBar.data('scale');
if( scaleY + 1 < scaleMax) {
newScaleValue = scaleY + 1;
}
// ...
loadingBar.velocity({
scaleY: newScaleValue
}, 100, loadingBarAnimation);
}当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中，然后load()新的url内容。
function loadNewContent(newSection) {
var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
//load the new content from the proper html file
section.load(newSection+'.html .cd-section > *', function(event){
loadingBar.velocity({
scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)
}, 400, function(){
section.addClass('visible');
var url = newSection+'.html';
if(url!=window.location){
//add the new page to the window.history
window.history.pushState({path: url},'',url);
}
// ...
});
});
}通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。