jquery mobile实现手机上的文字也许图片可以左右滑动
怎样用jquery mobile实现手机上的文字或者图片可以左右滑动?
第一种:
首先左右滑动如何实现:比如这个块区域是
<div id="move"></div>
那么对该div进行监听触摸屏事件:
<script>
var x_m_d =null;
var x_m_u = null;
var m_d=false;
document.getElementById("move").addEventListener('touchstart',m_down, false);
document.getElementById("move").addEventListener('touchmove',m_up, false);
function m_down(e){
x_m_d = e.touches.pageX;
m_d=true;
}
function m_up(e){
x_m_u = e.touches.pageX;
if(m_d){
if(x_m_u - x_m_d > 50)
right();//调用右划方法
if(x_m_u - x_m_d < -50)
left();//调用左划方法
}
}
</script>
那么如何让div进行移动呢,设置div的style样式,position:absolute;
当调用right()或left()方法时,去改变此div的left值即可
<div id="move" style="position:absolute;left:0px;top:0px"></div>
注:JM实现的是整屏滑动,一个屏幕的页面在JM中就是一个div,局部滑动不好实现。
第二种:
$(".J-page").each(
function(index) {
var num = index + 1;
var numR = num - 1;
var numL = num + 1;
var numIndex = $(this).find(".picIndex").val();
var pageIndex = $(this).find(".pageIndex").val();
// 绑定手指从手机从左往右滑(等同左点击)()
$("#p" + num).bind('swiperight', function() {
// alert("num"+num);
// alert("numR"+numR);
// alert("numL"+numL);
var move = true;
// 不显示箭头翻页 和 介绍层
showHide();
picModel = 1;
// ("numIndex"+numIndex);
// alert("currentIndex"+currentIndex);
if (pageIndex == 1) {
// alert("1");
move = false;
}
if (currentIndex == 1 && firstin == 0) {
// alert("2");
move = false;
}
// alert(move);
// 翻页滑动效果
if (move == false) {
return true;
} else {
firstin = 1;
// alert(numR);
if (numR == 0 || numIndex == 1) {
$.mobile.changePage("#p" + pageNum, {
transition : "slide",
reverse : true
}, false);
} else {
$.mobile.changePage("#p" + numR, {
transition : "slide",
reverse : true
}, false);
}
// }
;
}
})
// 绑定手指从手机从右往左滑(等同右点击)
.bind('swipeleft', function() {
var move = true;
// 不显示箭头翻页 和 介绍层
showHide();
picModel = 1;
if (pageIndex == pageNum) {
// alert(1);
$(this).find(".J-right").addClass("again");
hideShow();
move = false;
}
if (currentIndex == pageNum && firstin == 0) {
// alert(2);
move = false;
}
// alert("numIndex"+numIndex);
// alert("move"+move);
// 翻页滑动效果
if (move == false) {
return true;
} else {
firstin = 1;
// alert("numL"+numL);
// alert("numIndex"+numIndex);
// alert("pageNum"+pageNum);
// alert("numIndex"+numIndex);
if (numL == pageNum + 1 || numIndex == pageNum) {
$.mobile.changePage("#p1", {
transition : "slide",
reverse : false
}, true);
} else {
$.mobile.changePage("#p" + numL, {
transition : "slide",
reverse : false
}, true);
}
// }
}
// 翻页到最后一张时改变样式/显示描述
if (pageIndex == pageNum - 1) {
// alert($(this).siblings().last().html());
$(this).next().find(".J-right").addClass("again");
hideShow();
return true;
}
});
// 绑定点击左翻页
$(this).find(".J-left").click(function() {
firstin = 1;
// 显示箭头翻页 和 介绍层
hideShow();
// 判断是否第一页和最后一页 第一页不可左翻左点 最后一页 again
// pageUp();
if (num == 1) {
$.mobile.changePage("#p" + pageNum, {
transition : "slide",
reverse : true
}, false);
} else {
$.mobile.changePage("#p" + numR, {
transition : "slide",
reverse : true
}, false);
}
;
})
// 绑定点击右翻页
$(this).find(".J-right").click(function() {
firstin = 1;
// alert(num)
// 显示箭头翻页 和 介绍层
hideShow();
// alert("2");
$.mobile.changePage("#p" + num, {
transition : "slide"
}, true);
if (num == pageNum) {
$.mobile.changePage("#p1", {
transition : "slide"
}, true);
} else {
$.mobile.changePage("#p" + numL, {
transition : "slide"
}, true);
}
;
})
// 绑定触碰屏幕显示隐藏层
$(this).find(".pic_layer").bind(
'tap',
function() {
if ($(".bg").is(":visible")) {
$(this).parent().parent().parent().parent()
.find(".bg").slideUp("fast");
$(this).parent().parent().parent().parent()
.find(".J-header").slideUp("fast");
$(this).parent().parent().parent().parent()
.find(".J-left").hide();
$(this).parent().parent().parent().parent()
.find(".J-right").hide();
picModel = 1;
} else {
$(this).parent().parent().parent().parent()
.find(".bg").slideDown("fast");
$(this).parent().parent().parent().parent()
.find(".J-header").slideDown("fast");
$(this).parent().parent().parent().parent()
.find(".J-left").show();
$(this).parent().parent().parent().parent()
.find(".J-right").show();
picModel = 0;
}
})
});// each end
其他相关的一些附带效果:
var picModel = 1; // 0 全选模式;1 只展示图片
var indexPic = 1;
var currentIndex = $("#currentIndex").val();
var surH;
setAndroidForClass("picd");
function orient() {
if (window.orientation == 90 || window.orientation == -90) {
// ipad、iphone横屏;Andriod横屏
if (isAndroid()) {
surH = $(window).width();
$(".J-page").css("max-height","100%");
} else {
surH = window.screen.width - 52;
}
return false;
} else if (window.orientation == 0 || window.orientation == 180) {
// ipad、iphone竖屏;Andriod竖屏
if (isAndroid()) {
surH = window.screen.width;
$(".J-page").css("max-height","100%");
} else {
surH = window.screen.height - 60;
}
return false;
} else {
surH = $(window).height();
return false;
}
}
//图片在各种分辨率下未知的容器内上下左右居中
function picAuto() {
// var surH = window.screen.height-60;
// var surH = $(window).height();
// alert(surH);
var arrowsLt = (surH - 120) / 2;
$(".pic_conent").height(surH);
$(".J-left").css("top", arrowsLt);
$(".J-right").css("top", arrowsLt);
$(".J-page").css("max-height",surH);
// window.scrollTo(0, 1);
}
// 用户变化屏幕方向时调用
$(window).bind('orientationchange', function(e) {
orient();
picAuto();
});