应用场景:触碰屏幕进行上拉隐藏指定模块内容,有过度效果;在滚动到第一条内容的时候,才可以进行下拉重新出现该模块内容。
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