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();

 

 

});