13
回答
不使用任何框架,教你制作网页滑动切换效果
【腾讯云】学生服务器套餐10元/月 >>>   

我做了一个关于网页滑动切换的小例子。这个确实很简单,只要你会使用jQueryjQuery Mobilezepto或者其他一些框架,然后他们会给你处理好这个。我不想这么做,我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。

我谷歌搜索了下相关的资料,没有找到什么好的解决办法,所以我打算自己写。

我想出的解决办法其实很简单,采用AJAX刷新、CSS切换。这里还需要注意的是,只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用,可以在AndroidIOS系统上运行,所以我只需要WebKit的兼容性。)

首先,我们来看看对body标签的css样式,我让它有动画效果:

body{
   position: relative;
   -webkit-transition: left .2s ease;
}

接下来,我做的是给超链接添加点击事件,让它产生切换效果。这我从一篇很棒的文章中学到的一些方法,来处理这些没有jQuery时的操作,那篇文章叫从jQuery到JavaScript

document.addEventListener('DOMContentLoaded', function() {
  replaceLinks();
});

function replaceLinks(){
   var links = document.querySelectorAll('a');

   for (i=0; i<links.length; i++){
      var link = links[i];
      link.addEventListener("click",replacePage, false);
   }

}

下一步是使用AJAX获取到链接页面。

event.preventDefault();
var href= this.href;

var ajax = new XMLHttpRequest();
ajax.open("GET",href,true);
ajax.send();

现在来看看要达到切换效果,还需要哪些步骤:

1. 滑动当前页面到屏幕左侧;

2. 瞬间移动当前页面到屏幕右侧;

3. 替换body里面的内容;

4. 从屏幕右侧滑入当前页面对。 

你必须要遵循上面的步骤,不然不能达到预期的效果;现在我来告诉我是怎么做的:

我移动body到屏幕的左侧

body.style.left = "-100%";

这里我写了个移动监听事件

body.addEventListener( 'webkitTransitionEnd', moveToRight, false);

function moveToRight(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);
   body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.style.opacity = 0;
   body.style.left = "100%"
}

接下来,我替换body的内容,让它再次可见,调整浏览记录,并将它带回屏幕中心。

function returnToCenter(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.innerHTML = bodyContent;
   history.pushState(null, null, href);
   body.style.opacity = 1;
   body.style.left = 0;
   replaceLinks();
}

切换过程中,用户可能会点击后退按钮,我们还需对此进行处理:

window.addEventListener("popstate", handleBackButton);

function handleBackButton(e) {

   var ajaxBack = new XMLHttpRequest();
   ajaxBack.open("GET",location.pathname,true);
   ajaxBack.send();

   ajaxBack.onreadystatechange=function(){
      var bodyBack = document.querySelector('body');
      var bodyBackContent = grabBody(ajaxBack.responseText, "body");
      bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);
      bodyBack.style.left = "100%";

      function backToCenter(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.innerHTML = bodyBackContent;
         body.style.opacity = 1;
         body.style.left = 0;
         replaceLinks();
      }

      function moveToLeft(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);
         body.addEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.style.opacity = 0;
         body.style.left = "-100%"
      }
   }
}

有人会问,这是一个最好的方法么?我也不知道,但是它确实管用,而且通过谷歌我没有找到更好的解决方案。

这里提供有一个演示地址。(只WebKit浏览器有效)

你也可以通过github获取完整的源代码。

 

原文链接OSChina.NET 编译

<无标签>
举报
迷途d书童
发帖于6年前 13回/7K+阅
顶部