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;}

• 

  oldman 剩余时间20小时

  在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。如果给定formindex参数，从该位置开始往后查找

- 嬷嬷达

嬷嬷达

嬷嬷达

嬷嬷达

• 

  oldman 剩余时间20小时

  在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。如果给定formindex参数，从该位置开始往后查找

- 嬷嬷达

嬷嬷达

嬷嬷达

嬷嬷达

• 

  oldman 剩余时间20小时

  在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。如果给定formindex参数，从该位置开始往后查找

- 嬷嬷达

嬷嬷达

嬷嬷达

嬷嬷达