jQuery移动端上拉查看详情

所属分类:UI-拖和放,滚动

 27050  318  查看评论 (5)
分享到微信朋友圈
X
jQuery移动端上拉查看详情 ie兼容9

使用方法

引样式与js:

<link rel="stylesheet" href="css/style.css">
<scriptt src="http://www.jq22.com/jquery/jquery-1.10.2.js"></scriptt>
<scriptt src="js/iscroll.js"></scriptt>

应用的js:

var myscroll = new iscroll("wrapper", {
    onscrollmove: function() {
        if ((this.y + 70) < (this.maxscrolly)) {
            $('.pull_icon').addclass('flip')
        } else {
            $('.pull_icon').removeclass('flip loading')
        }
    },
    onscrollend: function() {
        if ($('.pull_icon').hasclass('flip')) {
            pullupaction()
        }
    },
    onrefresh: function() {
        $('.more').removeclass('flip')
    }
});

function pullupaction() {
    settimeout(function() {
        $('.tab_box li').eq(0).removeclass('active');
        $('.tab_box li').eq(1).addclass('active');
        $('.tab_cont').hide();
        $('.tab_cont').eq(1).show()
    }, 400)
}
if ($('.scroller').height() < $('#wrapper').height()) {
    $('.more').hide();
    myscroll.destroy()
}
$('.tab_box li').on('click', function() {
    $(this).siblings('li').removeclass('active');
    $(this).addclass('active');
    var index = $(this).index();
    $('.tab_cont').hide();
    $('.tab_cont').eq(index).show()
}

相关插件-拖和放,滚动

拖放交互的想法

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

jQuery自由拖曳照片插件

可自由拖曳照片,并展现文字和内容
  拖和放
 27478  324

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38718  374

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 25254  319

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

    zhuzhuCode 0
    2019/3/11 11:36:51
    请问上拉跳转有什么建议吗 回复
    人和而事成 0
    2018/8/27 23:05:27
    就是如此无情 0
    2018/5/29 13:39:00
    下下来试试
        月牙威武0
        2018/6/20 8:32:28
        地方
    回复
    不’离 0
    2018/5/18 17:51:43
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复