html5 图片相册

<script type="text/javascript">

	var content = $(".content");
	var winW = $(window).width();
	var winH = $(window).height();
	
     //div box 宽高
	content.css({ 
        width:winW,
        height:winH,
        margin:"0 auto"
	});


	var ul = $(".ul-box");
	var li = $(".li-box");
	li.css({ 
       width:winW,
       height:(winH*0.76),
       overflow:"hidden"
	});
	ul.css({ 
         width:winW,
         height:(winH*0.76),
         overflow:"hidden"
	  });
	var user = $(".user");
	user.css({ 
      width:winW,
      height:(winH*0.3)
	}); 

	var h2 = $(".h2");

	var h2H = h2.height();
	
	h2.css({ 
      'line-height':h2H+"px"
	});

	var user = $(".user-a");
	user.css({ 
        width:h2H-5,
        height:h2H-5
	});
    

//添加事件
    var cid;
    var lock = false;
    var page = $(".page");
   // $('.page').mousedown(function(e){
	//	e.preventDefault();
	//});


$('.content').delegate(content,'swipeLeft',function(){
		
			var _id = cid = $(this).attr('data-id');
		    content.addClass("li-none");
		    _id  ;
		    content.eq(_id).addClass("li-block animated bounceInRight");
		   
	});


$('.content').delegate(content,'swipeRight',function(){
		
			var _id = cid = $(this).attr('data-id');
		    content.addClass("li-none");
		    _id--;
		    content.eq(_id).addClass("li-block animated bounceInRight");
		   
		   
	});

blockquote, body, button, dd, dl, dt,figure, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
        margin: 0;
        padding: 0;

        }
ul,li,ol{list-style: none;}
body{
    background:rgba(0,0,0,.9);
    margin:0 auto;
    overflow:hidden;
    position: relative;
}


.li-box{ 
   float:left;
}
.img-box{ 
   width:90%;
   height:73%;
   margin:0 auto;
   overflow:hidden;
}
.big-img{ 
   display:block;
   height:auto;
   width:100%;
   overflow:hidden;
   vertical-align: middle;
   margin:0 auto;
}
.user-text{ 
   height:24%;
   width:87%;
   margin:0 auto;
   background:rgba(255,255,255,1);
   padding:1% 1.5% 2% 1.5%;
   overflow:hidden;

}


.h2{ 
  width:100%;
  height:25%;
  margin:1%;
  overflow:hidden;
  font-size:1em;

 
}

.user-a{ 
   
   border:2px solid rgba(55,151,185,.9);
   border-radius:100%;
   overflow:hidden;
   display:inline-block;
}
.span{ 
  display: inline-block;
  vertical-align: 6px;
  padding:0 6px;
  color:rgba(55,151,185,.9);
}

.time-a{ 
  display: inline-block;
  height:100%;
  width: auto;
  padding: 0 6px;
  float:right;
  font-size:1em;
  text-decoration: none;
  color:#333;
  padding-top:2px;
}

.p{ 
  width:100%;
  height:57%;
  line-height: 1.3em;
  padding:1% 0 2% 0;
  overflow:hidden;
  font-size:0.88em;
  font-family: "微软雅黑"
}

.user{ 
  padding:5%;
}

.user-div{ 
   width:15%;
   height:85px;
  
   margin-right:10%;
   float:left;
 }

 .user-div-a{ 
   height:50px;
   width:50px;
   
   display:block;
    border-radius: 100%;
    border:2px solid rgba(55,151,185,.9);
    position: relative;
 }

 .user-div-a img{ 
    height:100%;
    width:100%;
    border-radius: 100%;
 }

 .user-span{ 
   display: block;

   height:25px;
   margin-top:5px;
   color:rgba(55,151,185,.9);
   overflow: hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
 }

 .user-div-a em{ 
    background:rgba(205,78,78,1);
    display: block;
    position: absolute;
    height:15px;
    width:15px;
    border-radius: 100%;
    line-height: 15px;
    text-align: center;
    color:#fff;
    right:-5px;
    top:0px;
 }


 .button{ 
   display: block;
   position: absolute;
   top:99%;
   transform: translate(-50%,0);
   -webkit-transform: -webkit-translate(-50%,0);

   margin-left:50%;
   
   
 }


 .li-none{ display: none;}
 .li-block{display:block;}