
这是一款基于jquery.mobile实现的仿苹果手机短信删除功能网页特效,简单的jQuery手机向左滑动删除代码。
js代码
<script type=\"text/javascript\" src=\"js/jquery.mobile-1.4.3.min.js\"></script>
<script type=\"text/javascript\">
$(function() {
function prevent_default(e) {
e.preventDefault();
}
function disable_scroll() {
$(document).on(\'touchmove\', prevent_default);
}
function enable_scroll() {
$(document).unbind(\'touchmove\', prevent_default)
}
var x;
$(\'.swipe-delete li > a\')
.on(\'touchstart\', function(e) {
console.log(e.originalEvent.pageX)
$(\'.swipe-delete li > a\').css(\'left\', \'0px\') // close em all
$(e.currentTarget).addClass(\'open\')
x = e.originalEvent.targetTouches[0].pageX // anchor point
})
.on(\'touchmove\', function(e) {
var change = e.originalEvent.targetTouches[0].pageX - x
change = Math.min(Math.max(-100, change), 0) // restrict to -100px left, 0px right
e.currentTarget.style.left = change + \'px\'
if (change < -10) disable_scroll() // disable scroll once we hit 10px horizontal slide
})
.on(\'touchend\', function(e) {
var left = parseInt(e.currentTarget.style.left)
var new_left;
if (left < -35) {
new_left = \'-100px\'
} else if (left > 35) {
new_left = \'100px\'
} else {
new_left = \'0px\'
}
// e.currentTarget.style.left = new_left
$(e.currentTarget).animate({left: new_left}, 200)
enable_scroll()
});
$(\'li .delete-btn\').on(\'touchend\', function(e) {
e.preventDefault()
$(this).parents(\'li\').slideUp(\'fast\', function() {
$(this).remove()
})
})
});
</script>










暂无评论内容