插件描述：移动端上滑显示更多内容，类似高德地图首页，该插件仅支持移动端，不支持PC端
更新时间：2019-10-18 01:20:04
请注意：该插件仅支持移动端，不支持PC端
参数：
new Touch({
contEl:document.getElementById("shadowBox"), //背景灰色浮层，必选参数
shadowEl:document.getElementById("contBox"), //内容块，必选参数
top:0.1, //内容块停留的最高处 (取值范围：0.1-1,默认0.1)，可选参数
bottom:0.9, //内容块停留的最低处 (取值范围：0.1-1,默认0.9)，可选参数
opacity:0.5, //背景灰色浮层的最高透明值 (取值范围：0.1-1,默认0.5)，可选参数
duration:0.3 //松手时候下滑或上滑动画的持续时间 (单位：秒,默认0.3)，可选参数
});
PREVIOUS:
NEXT:
相关插件-拖和放
讨论这个项目（9）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
异乡人丶 0
2023/4/6 17:47:06
-
我需要在 contBox 盒子里面加一个按钮一直固定显示在这个盒子顶部位置 应该怎么弄？
土豆同学1
2023/4/6 18:54:44
contBox里面的内容改成这样：
<div id="contBox"> <div style="height: 50px; position: absolute; top: 0; left: 0;">固定的内容</div> <div style=" position: absolute; top: 50px; bottom: 0; left: 0; width: 100%; overflow: auto;"> <!--这里放任何想放的内容--> <div style="height: 150px;background: red;">上滑这个红色块试试</div> <div style="height: 150px;background: orange;"></div> <div style="height: 150px;background: yellow;"></div> <div style="height: 150px;background: green;"></div> <div style="height: 150px;background: blue;"></div> <div style="height: 150px;background: purple;"></div> </div> </div>
ten170
2023/12/7 16:48:21
-
如果想让固定的内容比下面的元素慢一点滑动，达到一个层级效果，怎么加过渡呀
独家记忆 1
2019/12/26 11:19:09
-
找到问题了，初次点击的时候松开鼠标，在touchend方法里这个 this.direction 是undefined，就执行了后面的this.top;就默认打开了，等到上滑再收回去，他就有了一个toBottom的值，就会执行this.bottom，再点击就不会默认打开了，我就在init的时候加了一个属性，this.direction = 'tobottom'
清风自来0
2020/6/9 10:22:14
-
能把具体的代码截个图嘛~
朝阳?1
2021/12/3 17:32:03
我在touchend中加了个判断
touchend: function(e) {
var _this = this;
if (this.state == "scroll") {
return;
}
this.y = this.direction == "toBottom" ? this.bottom : this.top;
this.height = this.h - this.y;
this.opacity = this.direction == "toBottom" ? 0 : this.opacityMax;
this.setDom("end");
// 加了个判断
if (!this.direction) {
this.direction = "toBottom"
this.contEl.style.overflow = "auto";
} else if (this.direction == "toBottom") {
this.direction = "toTop"
} else {
this.direction = "toBottom"
this.contEl.style.overflow = "auto";
}
// end
this.ifTouch = false;
},
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
