js与jquery实现页面滑动效果

ljqian

浏览: 6826 次
性别:
来自: 常熟

最近访客更多访客>>

andseny

nafengye

wbx19871008

_wyh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery
javascript

jquery javascript 滑动效果

前言：

两个月前开始正式工作,之前对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行。

分享到：

jqtouch初解

2012-09-03 10:49
浏览 5166
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论