好资源导航 » 文章资讯 » jQuery实现移动端下拉展现新的内容回弹动画

jQuery实现移动端下拉展现新的内容回弹动画

2023-07-22 12:54:05 236

jQuery移动端下拉展现新的内容动画回弹，供大家参考，具体内容如下

jquery的方法,写的比较细,可以改成原生的这里就不做修改了,话不多说上代码,也可以改成下拉刷新






顶部回弹

html,body,div,h2{margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;}
.wrap{width:100%;height:100%;overflow:hidden;position:relative;}
.hideBox{width:100%;height:100%;background-color:#f5f5f5;position:absolute;top:0;left:0;overflow-y:auto;}
.hideBoxh2{width:100%;margin-top:20%;font-size:16px;text-align:center;}

.top{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;background-color:#fff;overflow-y:auto;text-align:center;}
.moveBox{background-color:#1a84dd;color:#fff;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;margin:0auto;}
.moveIn{transition:all1sease-in;}





这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容
这是隐藏层的内容

移动块

移动块移动块移动块移动块移动块移动块移动块 $(function(){ moveBoxFun($(".top")); }) //移动方法 functionmoveBoxFun(dome){ varstartY,endY,intY, maxH=$(window).height(), maxY=maxH*0.6;//手指移动的距离 if(dome){ dome.on('touchstart',function(e){ vartouchS=e.originalEvent.targetTouches[0]; varstartY=touchS.clientY;//鼠标相对浏览器窗口高度 //获取当前元素scrollTop varscrollTop=dome.scrollTop(); //不在顶部禁止 if(scrollTop!==0){ dome.css({top:0}); dome.unbind('touchmove'); return; } //移动变量 varmoveY=0; dome.on('touchmove',function(ev){ vartouchM=ev.originalEvent.targetTouches[0]; varmY=touchM.clientY; moveY+=2; if(mY-startY>0){ dome.css({ top:moveY+'px' }) } //如果刷新可以改成window.location.reload() }) dome.on('touchend',function(ev){ vartouchE=ev.originalEvent.changedTouches[0]; varendY=touchE.clientY; dome.unbind('mousemove'); if(endY-startY>0&&endY-startY>maxY){ dome.animate({ top:maxH+'px' },function(){ dome.hide(); }) }else{ dome.css({ top:'0px' },200) } }); }); } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jQuery实现移动端下拉展现新的内容回弹动画

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

这是隐藏层的内容

热门推荐

随机推荐