导读：原文来自DZone，作者Terrence Ryan发表的一篇《HTML Page Slide Without a Framework》，只要你会使用jQuery、jQuery Mobile、zepto等，无须使用任何框架就可以实现网页滑动切换效果。
我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。
我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。
我想出的解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，所以我只需要WebKit的兼容性。)
首先，我们来看看对body标签的css样式，我让它有动画效果：
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>body{ </p></li><li><p> position: relative; </p></li><li><p>-webkit-transition: left .2s ease; </p></li><li><p>} </p></li></ol>
|
接下来，我做的是给超链接添加点击事件，让它产生切换效果。这我从一篇很棒的文章中学到的一些方法，来处理这些没有jQuery时的操作，那篇文章叫从jQuery到JavaScript。
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>01 document.addEventListener('DOMContentLoaded', function() { </p></li><li><p>02 replaceLinks(); </p></li><li><p>03 }); </p></li><li><p>04 </p></li><li><p>05 function replaceLinks(){ </p></li><li><p>06 var links = document.querySelectorAll('a'); </p></li><li><p>07 </p></li><li><p>08 for (i=0; i<links.length; i++){ </p></li><li><p>09 var link = links[i]; </p></li><li><p>10 link.addEventListener("click",replacePage, false); </p></li><li><p>11 } </p></li><li><p>12 </p></li><li><p>13 } </p></li></ol>
|
下一步是使用AJAX获取到链接页面。
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>1 event.preventDefault(); </p></li><li><p>2 var href= this.href; </p></li><li><p>3 </p></li><li><p>4 var ajax = new XMLHttpRequest(); </p></li><li><p>5 ajax.open("GET",href,true); </p></li><li><p>6 ajax.send(); </p></li></ol>
|
现在来看看要达到切换效果，还需要哪些步骤:
1. 滑动当前页面到屏幕左侧；
2. 瞬间移动当前页面到屏幕右侧；
3. 替换body里面的内容；
4. 从屏幕右侧滑入当前页面对。
你必须要遵循上面的步骤，不然不能达到预期的效果；现在我来告诉我是怎么做的：
我移动body到屏幕的左侧
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>1 body.style.left = "-100%"; </p></li></ol>
|
这里我写了个移动监听事件
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>1 body.addEventListener( 'webkitTransitionEnd', moveToRight, false); </p></li><li><p>2 </p></li><li><p>3 function moveToRight(event){ </p></li><li><p>4 var body = document.querySelector('body'); </p></li><li><p>5 body.removeEventListener( 'webkitTransitionEnd', moveToRight, false); </p></li><li><p>6 body.addEventListener( 'webkitTransitionEnd', returnToCenter, false); </p></li><li><p>7 body.style.opacity = 0; </p>
<div style=" display:block; width:100%; padding-top:15px; margin:0px auto; height:90px; overflow:hidden; text-align:center;"><script src="/2011/ads/tech_content_end_468x60.js"></script><script type="text/javascript"><!--
google_ad_client = "pub-5977682010997732";
/* 468x60, 09-9-9 */
google_ad_slot = "4048873275";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><ins id="aswift_1_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&&s.log.push(i)}" vspace="0" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;" frameborder="0" height="60" scrolling="no" width="468"></iframe></ins></ins>
</div>
</li></ol>
|
发表回复