估计以后也没有机会认真花些时间去研究前端技术了(其实单纯作为爱好也很好的，可是我太懒太贪玩了)。
效果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 kevinblogPage Controller