移动端上滑显示更多内容,类似高德地图首页(原创)

所属分类:输入-拖和放

 9180  127  查看评论 (4)
分享到微信朋友圈
X
移动端上滑显示更多内容,类似高德地图首页(原创) ie兼容12

更新时间: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),可选参数
});
相关插件-拖和放

页面多板块拖动,调整边缘,吸附效果(原创)

接到一个需求:楼宇房间的简单布局:点击左侧房屋号码,到右面出现以后可以各种调整。
  拖和放
 23991  295

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 20924  282

jQuery图片DIV指定范围内拖动加调整大小

实现在指定大小DIV内拖动图片,以及调整图片大小
  拖和放
 36652  337

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 19058  267

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    独家记忆 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
        能把具体的代码截个图嘛~
    回复
    独家记忆 0
    2019/12/25 10:42:07
    第一次点击的时候为什么会上去,收下去之后再点击,就不会上滑了,没有拖拽,只是点击 回复
    黄河爱浪 0
    2019/10/20 16:22:15
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复