js与jquery实现页面滑动效果
前言：
两个月前开始正式工作,之前对js只是听过,没有真正使用过,JQuery也只是听说过有这种东西（大学里太懒散了）。由于工作需要,公司安排笔者做一个前端web页面仿iphone滑动效果,经过1个多月的努力,笔者总算是小有所成吧。
首先,笔者实现的是web页面跳转时以左右滑动效果取代直接跳转,其中包括对浏览器前进后退键的支持（即前进后退也支持左右滑动）。当前,目前有几款jquery插件已经实现了该效果,如jquery-mobile,jqtouch,jquery-ui等,这些插件肯定会比笔者自己写的代码更加可靠些。
实现该效果有四个文件需要引入,分别为：
1. index.php(笔者自己写的首页,是实现滑动效果的基础页面)
2. slide.js(笔者自己写的滑动效果js文件，里面是实现滑动效果的js代码,不过由于笔者还没怎么学js封装,可能在js大神们看来就像是小孩子捏的泥巴一样)
3. jquery.js(jquery框架文件,可从http://docs.jquery.com/Downloading_jQuery下载最新版本)
4. historyFrame.js(该js文件是笔者从http://www.cnblogs.com/meteoric_cry/archive/2011/01/11/1933164.html上拷贝来的，功能是实现对浏览器hash值的监听以用来监控浏览器前进后退键)
使用方法：
引入4个文件后
1. 在index.php页面, var isslide=false;时为打开滑动效果;设置当滑动效果关闭时,window.location.assign("");所要跳转到的页面,该页面为不采用滑动效果时项目的首页。
2. 在slide.js文件中设置var FIRSTPAGEOFSLIDE="";
3. 在需要实现滑动效果的a标签的class中添加一个slide类,只有class中有slide类的a标签才会执行滑动效果。笔者设置为当开启滑动效果且被点击的a标签的class中没有slide类,则在新窗口中打开连接。
遗留问题：
笔者写的滑动效果还是有问题的
1. 笔者的外部文件通过ajax引入到index.php页面中的div中,且不将其删除。由于进行了空判断,所以当同一个div中已经有值时,就不再调用ajax方法。该方法的好处是使已经加载过的页面不需要再一次进行ajax方法加载,缺点在于如果页面更新后不能及时的进行用户端的更新。
2. 关于浏览器前进后退键监控的原理是对url中hash值的监控完成的,而不是真正的对浏览器前进后退的监控,也就是说不能判断用户按得是前进键还是后退键,所以笔者把浏览器按键事件一律绑定为向右滑。
3. 笔者试过几款手机浏览器,虽然同为webkit内核的浏览器,各个浏览器之间对滑动方法的支持各异,所以兼容性问题还是蛮大的。
总结：
写这篇文章的主要目的是为了巩固上个月的学习成果,笔者之前也说了,两个月前才接触的js,同时接触的还有php与ajax。觉得js入门还是蛮简单的,现在一般人写的js文件都能看懂。不过看懂归看懂,感觉让笔者自己写一份封装的很好的js文件还是很有压力的。
附上源码：
index.php文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
/*在ready事件中判断当前浏览器是否调用滑动效果，若否,则replace到home.php,(home.php为访
问该网址原先要跳转到的首页)若是,则加载滑动效果的js文件,slide.js以及historyFrame.js*/
var isslide=false; //只需改动isslide的值就能控制要不要使用slide效果
if(isslide==true){
window.location.assign("home.php");
}else{
funload();
}
/*加载两段关于滑动效果的js代码*/
function funload(){
var js_history=document.createElement("script");
js_history.setAttribute("type","text/javascript");
js_history.setAttribute("src","historyFrame.js");
document.getElementsByTagName("head")[0].appendChild(js_history);
var js_slide=document.createElement("script");
js_slide.setAttribute("type","text/javascript");
js_slide.setAttribute("src","slide.js");
document.getElementsByTagName("head")[0].appendChild(js_slide);
}
</script>
</head>
<body>
<div id="slideonindex" class="divbasestyle divbasestyle_bg"></div>
</body>
</html>
slide.js文件
var FIRSTPAGEOFSLIDE="";//FIRSTPAGEOFSLIDE常量用于定义首页默认情况下要载入的页面名,如你的index页面要引进home.php页面，该值则写为var FIRSTPAGEOFSLIDE="home"
//由于笔者对jquery的ajax()方法还没有研究,所以先用原始的ajax方法
var xmlhttp;
//ajax判断浏览器
function S_xmlhttprequest(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
/*ajax方法,mypage参数为引入的文件,形式为XXX.XXX,如home.php*/
function testInfo(mypage){
var divid=mypage.split(".")[0];//去掉.php,只留下home
S_xmlhttprequest();
xmlhttp.open("GET",mypage,false);
//ajax请求设为同步请求,这个很重要,可以让其他动作在该页面被引进成功后执行
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
divid="div#"+divid;
var newpage=xmlhttp.responseText;
var mytest=$(divid);
mytest.append(newpage);
testcheck(divid);
}else if(xmlhttp.readyState==2 && xmlhttp.status!=200){//如果访问页面不存在,则跳转到首页
alert("您所访问的地址不存在");
window.location.hash="";//把hash值设为空
window.location.replace("index.php");
}
}
xmlhttp.send();
}
/*-----------------------以上为ajax的方法-----------------------------------------------------------*/
$(document).ready(function(){
/*刷新页面时判断当前hash值,根据当前hash值显示div*/
var onloadhash=getHash();
onloadhash=isHashNull(onloadhash);
showpage(onloadhash);//根据当前url中的hash值显示对应页面
});
/*--------------为a标签绑定事件-----------------------------------------------*/
//重新创建变量nowhash用来存放当前url中的hash值
var nowhash=getHash();
//该方法用于绑定a标签的onclick事件，当a标签触发onclick事件时会把a标签的id号传到方法中，方法根据当前div与目标div进行slideleft方法的滑动
function slideonclick(a_slide){
var firstpage=nowhash;
firstpage=isHashNull(firstpage);
var nextpage=getNextPageid(a_slide);
slideleft(firstpage,nextpage);
}
/*---------------向左滑动向右滑动的效果实现方法------------------------------------------------------*/
/*滑动方法,thispage为当前页面,latterpage为目标页面,animate方法为滑动方法主体*/
function slideleft(firstpage,nextpage){
var thispage="div#"+firstpage;
var latterpage="div#"+nextpage;
/*该if语句用于判断是否在当前页点击了当前页的a标签,如果是则不执行任何操作*/
/*判断目标页面,根据目标页面加载相关信息*/
createdivforajax(nextpage);//下一张页面加载中（同步加载）
//滑动效果开始执行
$(thispage).animate({left:"-100%"},500);
$(latterpage).animate({left:"0%"},500,function(){
/*当滑动动画结束后,改变thispage的left样式,原为-100%,改变成100%*/
$(thispage).css("left","100%");
//隐藏之前的div,之前用的清空，换成隐藏可以避免每次点击都需重新调用ajax方法加载页面
$(thispage).hide();
});
//改变nowhash的值,使其一直为当前的hash值
nowhash=nextpage;
}
/*该方法是右滑方法，当浏览器前进后退被点击时触发，共三个参数，第一个是当前页，第二个是下一页，第三个判断是否为加载进来的第一页*/
function slideright(firsthash,nexthash,isFirstPage){
if(isFirstPage){//判断是否为第一页，若否则执行页面滑动效果切换，若是则重置hash值
location.replace("#");
}else{
var thispage="div#"+firsthash;
var formerpage="div#"+isHashNull(nexthash);
$(formerpage).css("left","-100%");
createdivforajax(isHashNull(nexthash));//该算法有什么用作者也忘了。。只记得没有这个判断会出错
$(thispage).animate({left:"100%"},500);
$(formerpage).animate({left:"0%"},500,function(){
$(thispage).hide();
});
//改变nowhash的值,使其一直为当前的hash值
nowhash=nexthash;
}
}
/*--------------------hash值变化的事件监听器------------------------------------------------------------*/
/*实例化历史管理*/
var historyManager = new HistoryManager();
/*添加监听器，当事件触发时调用该方法，（hash值的改变）*/
historyManager.addListener(function() {
var previoushash = arguments[0];//上一步的hash值
var isFirstPage=false;//设置变量isFirstPage,用于判断是否为第一页的boolean值，默认值为false;
var presenthash=nowhash;//当前的hash值
if(presenthash==""){//当前页的hash值为空时，设置变量isFirstPage的值为true
isFirstPage=true;
}
slideright(presenthash,previoushash,isFirstPage);
});
/*通过window所有onclick事件的触发监控，来使historyManager的触发*/
document.onclick = function(ev) {
ev = ev || window.event;
var elem = ev.srcElement || ev.target;
if (elem.tagName && elem.tagName.toLowerCase() == "a") {
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
var href = elem.getAttribute("href", 2);
historyManager.add(href);
}
}
/*-------------------简化代码所写的方法---------------------------------------------------------*/
/*获取当前页面的hash值，根据hash值判断用户当前在哪个页面*/
function getHash(){
var myhash=document.location.hash.slice(1);
return myhash;
}
/*判断所获取的hash值是否为空,为空则赋值FIRSTPAGEOFSLIDE该常量*/
function isHashNull(hash){
if(hash==""||hash=="null"){
hash=FIRSTPAGEOFSLIDE;
}
return hash;
}
/*根据当前hash值跳转到url指定页面*/
function showpage(nowhash){
var nowshowpage="div#"+nowhash;
createdivforajax(nowhash);
$(nowshowpage).css("left","0%");//把要显示的页面的left样式改为0%,即在当前页显示
}
/*
该方法用于控制调用创建新的用于存放ajax引入页面的div，调用ajax方法以及控制div的显示
通过判断div中的值是否为空判断是否加载ajax
*/
function createdivforajax(mydivid){
var mydiv="div#"+mydivid;
var mypage=mydivid+".php";
if($(mydiv).text()=="")//这一步是有缺陷的，如果后台信息更新，用户不能及时获取最新的信息
{
createDIV(mydivid);
testInfo(mypage);
$(mydiv).show();
}else{
$(mydiv).show();
}
}
/*根据页面a标签方法返回的id值来确定目标页面的名称
具体工作原理是根据返回的a标签的id找到a标签的href属性,形式为#XXX,返回XXX
*/
function getNextPageid(a_slide){
var nextpage="";
nextpage=a_slide.getAttribute("href").split("#")[1];
return nextpage;
}
/*创建该方法用于改写 在开启slide滑动模式后 的ul标签内代码*/
function testcheck(divid){
if($(divid+" p:first").attr("checked")==="true") return;//这部是
setSlide();
deletehash();
$(divid+" p:first").attr("checked","true");
}
/*获取class为slide的a标签，改变a标签的属性值,href,onclick*/
function setSlide(){
var a_slide=$("a.slide");
for(i=0;i<a_slide.length;i++){//循环改变每个class值为slide的a标签的href属性以及onclick属性
var hrefvalue=a_slide.eq(i).attr("href");
if(hrefvalue.indexOf("#")>=0){//如果href的值本身就有"#"符号,即已经被调用该方法,则去除"#"符号
hrefvalue=hrefvalue.split("#")[1];
}
hrefvalue="#"+hrefvalue.split(".")[0];//本身取出的href值为xxx.php,现只取xxx部分
a_slide.eq(i).attr("href",hrefvalue);//把改变的href值重新付给href属性
a_slide.eq(i).attr("onclick","slideonclick(this)");//为该a标签绑定onclick事件,调用slideonclick(this.id)事件实现左滑动效果
}
}
/*如果a标签的class没有slide属性,则不实现滑动效果,直接跳转*/
function deletehash(){
var a_not_slide=$("a:not(a.slide)");
for(i=0;i<a_not_slide.length;i++){
var not_slide="";
var not_slide=a_not_slide.eq(i);
not_slide.click(function(){
var hrefvalue=this.getAttribute("href");
window.open(hrefvalue);
});
}
}
/*生成存放ajax方法引入的php页面的div*/
function createDIV(divid){
var newdiv='<div id="'+divid+'" style="position:absolute;left:100%"><p checked="false"></p></div>';
$("div#slideonindex").append(newdiv);
}
更新：
1.testcheck(divid);已从157行该写到27行。