css仿qq下拉刷新效果

CSS是一种将HTML文档美化的技术，利用CSS可以实现很多网页的炫酷效果，比如qq下拉刷新效果就是一个很好的例子。

/*html*/

  

  

    

第一条信息
      
第二条信息
      
第三条信息
    



/*css*/
.Box{
  width: 300px;
  height: 500px;
  Box-shadow: 0 0 10px rgba(0,0.5);
  overflow: hidden;
}
.top{
  height: 100px;
  background-color: #09f;
}
.list-Box{
  height: 400px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.list{
  padding: 0;
  list-style: none;
}
.list li{
  height: 50px;
  line-height: 50px;
  text-align: center;
}

/*js*/
$(document).on("touchmove",function(e){
  e.preventDefault();
});

var list = $(".list");
var startY = 0;
list.on("touchstart",function(e){
  startY = e.originalEvent.changedtouches[0].pageY;
});
list.on("touchmove",function(e){
  var distance = e.originalEvent.changedtouches[0].pageY - startY;
  if(distance > 0){
    $(".top").css({
      transform: "translateY(" + distance/3 + "px)"
    });
  }else{
    $(".top").css({
      transform: "translateY(0px)"
    });
  }
});
list.on("touchend",function(e){
  $(".top").css({
    transform: "translateY(0px)",transition: "0.5s"
  });
});

以上代码实现了一个具有下拉刷新功能的列表，通过CSS样式和JavaScript代码的配合，添加了更加炫酷的效果。