html隐藏手机端某个模块,移动端触摸上拉隐藏指定模块内容，有过度效果（同时页面iscroll滚动）...

应用场景：触碰屏幕进行上拉隐藏指定模块内容，有过度效果；在滚动到第一条内容的时候，才可以进行下拉重新出现该模块内容。

style样式：

*{

margin: 0;

padding: 0;

font-family: "微软雅黑";

}

html,body{

width: 100%;

height: 100%;

position: relative;

font-size: 16px;

}

body体代码：

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

內容

script代码：需要引入jq和iscroll.js

var myScroll;

var myScroll2;

var startx, starty, all_y, endX, endY, distanceX, distanceY;

var isdown = true;//当内容滚动到第一条的时候才可以进行下滑出现原有内容

$(function() {

touch();//监听上划事件

})

//监听上划事件

function touch(){

//手指接触屏幕

$('body').bind('touchstart',function(e){

startX = e.originalEvent.changedTouches[0].pageX,

startY = e.originalEvent.changedTouches[0].pageY;

all_y = startY;

});

$('body').bind('touchmove',function(e){

//获取滑动屏幕时的X,Y

endX = e.originalEvent.changedTouches[0].pageX,

endY = e.originalEvent.changedTouches[0].pageY;

//获取滑动距离

distanceX = endX-startX;

distanceY = endY-startY;

//判断滑动方向

if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){

// alert('往右滑动');

}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){

// alert('往左滑动');

}else if(Math.abs(distanceX)

// alert('往上滑动');

if($(".first").height()>0){

$(".first").stop().animate({transform:"scaleY(0)"},150);

$(".first").stop().animate({height:"0"},150);

$(".second").stop().animate({top:"0"},150);

$(".third").css("height","78%");

$(".third").css("top","22%");

if(myScroll){

myScroll.destroy();myScrollInit();//初始化动态信息列表滚动

}else{

myScrollInit();//初始化动态信息列表滚动

}

}

}else if(Math.abs(distanceX)0){

if($(".first").height()<=0 && isdown==true){

$(".first").stop().animate({transform:"scaleY(1)"},150);

$(".first").stop().animate({height:"20%"},150);

$(".second").stop().animate({top:"22%"},150);

$(".third").css("height","56%");

$(".third").css("top","44%");

}

}

});

}

function myScrollInit(){

myScroll = new iScroll("third",{

mouseWheel:true,

click: true,

taps: true,

onScrollMove:function(){

},

onScrollEnd:function(){

if(Math.abs(this.y)<=50){//当内容滚动到第一条的时候才可以进行下滑出现原有内容

if(isdown==true) return;

isdown = true;

}else{

if(isdown==false) return;

isdown = false;

}

touch();

},

onRefresh:function(){

}

})

if($("#third").height()>$(".third_box").height()){

myScroll.destroy();

}

}

想查看具体的页面效果可以至百度云下载查看：

链接：https://pan.baidu.com/s/1WXLULJAG7PUvdik8S679-Q

提取码：yxt7