js与jquery实现页面滑动效果
?
<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" name="code">//由于笔者对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的值为trueisFirstPage=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行。
