估计以后也没有机会认真花些时间去研究前端技术了(其实单纯作为爱好也很好的，可是我太懒太贪玩了)。

效果http://www.kevinblog.net/lab/lab1

css部分

body
{
	min-height:480px;
	padding:0;
	margin:0;
	background:#ccc;
}
.box
{
	width:100%;
}
#header
{
	text-align:center;
	font-size:18px;
	line-height:40px;
	font-weight:bolder;
}
#header,#footer
{
	background:-webkit-gradient(linear,left top,left bottom,from(#363f4a),to(#192f4b));
	color:white;
	min-height:48px;
}
#footer
{
	text-align:right;
	font-size:12px; 
	line-height:18px;
}
#midbox
{
	height:80%;
}
.art
{
	height:87px;
	border-bottom:solid 1px #aaa;
}
#page_control
{
	height:45px;
}
#controller
{
	width:100px;
	height:100%;
	position:relative;
	text-align:center;
	border-radius:10px;
}
.art,#controller
{
	background-color:hsla(184,15%,97%,0.50);
}

其实上面的一个用WEBKIT的渐变出来的背景效果不算很明显

下面是js部分的代码，当然是用了jquery(习惯了),js要我写直接可以叫我去死啊~~~~

$(function(){
	window.scrollTo(0,1);//ios上可以隐藏地址栏，我的烂里程碑2不行，有待研究
	(function(){
		var pc=$('#page_control');	
		var c=$(pc).children();
		var cmove=function ()
		{
			event.preventDefault();
			$(c).css('left',event.targetTouches[0].pageX-$(c).width()/2);
			if (parseInt($(c).css('left')) <= 0)
				$(c).css('left',0);//这里继续执行回到前一页的函数
			if (parseInt($(c).css('left'))>=$(pc).width()-$(c).width())
				$(c).css('left',$(pc).width()-$(c).width());//这里继续执行翻到下一页的函数
		};
		$(c).css('left',($(pc).width()-$(c).width())/2);
		$(c).bind('touchmove',cmove);
	})();
	//以上为翻页部分
	
	
	(function(){
		var s=null;
		var itemTouch=function()
		{
			event.preventDefault();
			s=event.targetTouches[0].pageX;
		}
		var itemSelect=function()
		{
			event.preventDefault();
			if (Math.abs(event.targetTouches[0].pageX-s)>70)//向左（右）滑动70个像素作为选择文章的手势
			{
				var obj=this;
				$('#page_control,#footer,.art:not(#'+obj.id+')').fadeOut('show',function(){
					$(obj).unwrap();
					$(obj).animate({height:$('body').height()},'show');//callback function用ajax调用服务器相应内容
				});
			}
		}
		$('.art').bind({
			'touchstart':itemTouch,
			'touchmove':itemSelect
		});
	})();
	//以上为首页文章选择部分	
});

最后是html部分，js和css部分已经在上文里有了，这里就不在贴了

	kevinblog


	

    

    

    

    
Page Controller


        kblog v0.1 based on CodeIgniter

        CopyRight © 2011 by XXXX .All rights reserved.